I am using Aframe 0.7.0. and it working great! My application has camera with cursor and the raycaster intersect with entities.
I want to disable click event that is emitted by intersection of cursor and any entity, but at same time I want other events to work just fine, like mouseenter, etc.
How can I achieve this? Please let me know if I am missing any information required for this question.
Thanks
If i'm correct about Your idea, You should be able to do something like this.
Activate clicking on stuff using the addEventListener("click", handler)
Deactivate clicking on stuff using the removeEventListener("click", handler)
Having those in Your component,
AFRAME.registerComponent("foo", {
addListeners: function() {
this.el.addEventListener("click", this.handler);
},
removeListeners: function() {
this.el.removeEventListener("click", this.handler);
},
handler: function() {
// whatever response from clicking
}
});
You can enable clicking by using el.components.foo.addListeners and disable using el.components.foo.removeListeners from any other method.
Check out my example here. right box enables, disables the click event on the left one. Check it out in the console.
Related
Im trying to use registerHelper to respond to a click event on my page.
i seem to be having difficulty getting the page to perform a function based on a click event.
The function below runs when the page renders.
Template.registerHelper('deletetask', function () {
Tasksdb.remove(this._id);
how do i get it to run on a click event? I have tried something like:
Template.registerHelper('deletetask', 'click.delete' : function () {
Tasksdb.remove(this._id);
it just errors out.I think my syntax is off or i have to do it some other way.
Thanks
Template helpers return values for display. Template events are designed for, you guessed it, handling events.
Template.myTemplate.events({
'click .delete': function(ev){
Tasksdb.remove(this._id);
}
});
Note that this will be the data context corresponding to the instance of myTemplate that was clicked on.
so i'm working on a meteor project and am trying to get a drop down menu to close when the user clicks outside of it. i've done this before using jquery and normal html but this time we're using velocity.js and meteor.
so on the link that opens the drop down div, i have this:
Template.layout.events({
'click #profile-btn': function () {
if (userTog == false) {
$('#user-menu').velocity("fadeIn", { duration: 150 });
userTog = true;
}
else if (userTog == true) {
$('#user-menu').velocity("fadeOut", { duration: 150 });
userTog = false;
}
},
.....
and then i use a meteor package to deal with events on the body as this isnt supported right now..
Template.body.events({
'click html': function(e, data, tpl) {
userTog = false;
$('#user-menu').velocity("fadeOut", { duration: 150 });
e.stopPropagation();
}});
however the above is just not working.. it basically just makes the menu appear then disappear straight away. is it something to do with velocity.js, meteor or am i just doing it plain wrong ?!?
any advice would be greatly appreciated!
I just had to make a material design select box, so I feel your pain :-). Here's how I solved it:
Normally, you can only focus an input or an anchor. A trick I stumbled upon is that using tabindex="0" in your element attributes allows it to gain focus, even if it's a div. What's this mean? Well, if you can focus() an element, that means you can blur() it. So, when you click the button for the dropdown, add a line at the end of the event handler like $('.dropdown-menu').focus(). Then, to escape that, just create an event handler like 'blur .dropdown-menu': function() {*..hide..*}. That way, you don't have these ugly global event watchers.
The downside is that you get a glowing blue outline (for accessibility reasons). You can get rid of this by having a line like outline: 0; in your css.
PS, the reason why yours wasn't working is because 'click #profile-btn' bubbles up to the body, so it executes both. To fix it, you need to stop that bubblin via e.stopPropagation();.
I have a calendar with drag functionality where a user can drag events to quickly update them.
After Dragging an event I ask the user if he wants to save it and then call a UpdatEvent function.
However, before the user confirms, (just as the dialog appears) the event automatically reverts back and only return to the updated position if I confirm in the dialog.
Is there a way for the event to stay in the dragged position and then either revert back or stay in the actual one?
My eventDrop looks like this:
eventDrop: function (event, delta, revertFunc) {
if (confirm("Do you wish to save the event?")) {
UpdateEvent(event.id, event.start);
}
else {
revertFunc();
}
}
At the beginning of the Eventdrop and/or Eventresize place the following:
$('#calendar').fullCalendar('updateEvent', event);
I just found out that after upgrading to Meteor 0.5.2 (from 0.5) event handling for key events ('keypress', 'keydown', keyup') stopped working for me. Other events like ('click' & 'blur') work just fine.
Even in sample apps the code like this doesn't do anything:
Template.someTemplate.events = {
'keydown' : function(e) {
console.log(e);
}
};
The interesting thing is that this code does work (function fires) for keypresses in I'm typing inside an input type="text" or a textarea.
But elsewhere - nothing happens.
I'm testing on the latest Crome in Ubuntu 12.10.
Has anybody else experienced the issue?
Thanks,
George
The keydown event works for me for html that is editable. Input fields or contenteditable tags fire the keydown event.
But if you're asking how to handle keydown events on the body, this thread might help:
You can take a look at this thread: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/uHy--xIGH8o.
Basically, for now, you can attach an event handler to the body element directly. In the example in the above link, he waits until the template is rendered, and then used jQuery to attach the handler:
Template.myTemplate.rendered = function() {
// Assuming you're using jQuery
$('body').on('keydown',function() {
console.log('key pressed');
});
}
The Meteor team is apparently going to include better support for attaching body level events soon.
You could have simply enclosed
$('body').on('keydown',function() {
console.log('key pressed');
});
in meteor.startup function
I'm using following code to open thickbox for dynamically generated anchor tags, but it doesn't work for the first time, but second time it works.
function createMarker(point, InnerAddress) {
//Other Code
var strFBUserID = new GMarker(point, markerOptions);
GEvent.addListener(strFBUserID, "click", function() {
strFBUserID.openInfoWindowHtml(InnerAddress.split('$$')[0]);
tb_init('a.gmapthickbox');//works second time
});
allmarkers.push(strFBUserID);
return strFBUserID;
}
It seems tb_init fires before, openInfoWindowHtml, any way to solve this issue? I tried setTimeOut but no success. Any help will be greatly appreciated.
Try listening to the infowindowopen event on your map instance before calling tb_init. It should be fired once the content is ready in the DOM.
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.infowindowopen