How to remove the onmouseout event after having assigned a function? - javascript

I have a problem, I'm assigning a function to the onmouseout event, but after running the event, I need to remove it. would greatly appreciate your help.

This depends on your code, if you did this with d3, then you can say
inside your onmouseout event-function:
element.on("mouseout",func);
function func(){
/*do your stuff*/
element.on("mouseout",null);
}
If you bound the event via an event-attribute like <div onmouseout="..." > then you have to refactor this. In this case, simply use the d3 on() function to bind the event.
If you want to bind multiple handlers to the same event, you can use namespacing: By appending .name to the event, you can address them more specifically.

I'm assuming you added your event listener with d3's on event. their docs for removing an event is such:
If an event listener was already registered for the same type on the
selected element, the existing listener is removed before the new
listener is added. To register multiple listeners for the same event
type, the type may be followed by an optional namespace, such as
"click.foo" and "click.bar". To remove a listener, pass null as the
listener.
I can't correct your code, because you didn't add any.

Another way is to use jQuery:
$(element).bind("mouseout", myFunction);
$(element).unbind("mouseout");
jQuery unbind
jQuery bind
You can also use an optional namespace in the first parameter like:
"mouseout.myNamespace"
With this namespace you can bind/unbind multiple events of the same kind.
Another thing that maybe is interesting to you:
jQuery stopPropagation

Related

jQuery - Register / unregister listener for element "document"

I'll try to explain my problem. I'm using mouseup event listener so I can check whenever a click is performed and the target is not the desired element. This is the code I'm using:
function clickOutListener(element, callbackFunction){
$(document).mouseup(function(e){
if(!$(element).is(e.target) && $(element).has(e.target).length === 0) callbackFunction.call(this, null);
});
}
As you can see, the event listener is bound to the global document element and the way to unbind the listener would be:
$(document).off("mouseup");
Here comes what I need to achieve. If I unbind mouseup listener it will affect the other elements which use this listener (dropdowns and other features). I must guess that everytime I'm registering a listener it's not overriding the previous defined listener but adding the defined target function.
How can I access the different defined target functions for the same listeners?
$(document).mouseup(funct1);
$(document).mouseup(funct2);
$(document).mouseup(funct3);
How would you unregister the registered listener just for "funct2"?
Thank you in advance.
You can namespace your events when using the .on() syntax.
$(document).on('mouseup.myNamespace', function(e){ ... }
This allows you to remove events by namespace whilst leaving others in place.
$(document).off('mouseup.myNamespace');

JQuery - Change the function bound to a $elem.on('click') event

I have this event handler that looks something like:
$(document).on('click', 'a.close, #mask', Popup.close);
and I can't figure out how to change the function (Popup.close) dynamically for this event. The Popup.close variable is a local function that can be set by calling Popup.setClose(func), and I was hoping that this would then change the function that is called when this event is fired. I then realized that I may have to unbind the event, and bind the new function every time I want to change the Popup.close() function. Regardless, I could not figure out how to unbind and event that was previously bound using the .on('click',...) method.
So what I am asking is, what is the best way to change the executing function for a jQuery event bound using the .on() method?
I appreciate your help.
You can use .off("click") to remove the event and then attach the new event, but this will remove all click events.
$(document).off('click');
Or to preserve other events that may have been attached:
$(document).off('click', 'a.close, #mask');
JS Fiddle: http://jsfiddle.net/3Xzjj/

How can I remove an attached jQuery function programatically?

In $.ready() I have declared a click function as shown below
$(document).ready(function(){
$("#btnClk").click(function(clkevent){
//Doing Something Here
clkevent.preventDefault();
});
});
I want to remove this click() from $("#btnClk") in another javaScript function. How can I do this?
One of the problems with the proposed solutions is they remove all click event handlers registered, which may not be desired.
A solution to this is to separate the handler method out to a common scope shared by the both the participating methods then use that method reference along with .off() to resolve this
function btnclickHandler(clkevent){
//Doing Something Here
clkevent.preventDefault();
}
$(document).ready(function(){
$("#btnClk").click(btnclickHandler);
});
$("#btnClk").off('click', btnclickHandler);
Old School
$("#btnClk").unbind('click');
New School
$("#btnClk").off('click');
To register a click handler you should be using .on('click', ...) instead of .click - the latter can cause confusion because the same function is also used to trigger a click event.
To unregister the handler, use .off('click')
Please see the caveats at http://api.jquery.com/off/ regarding function handlers, name spaces, etc (my emphasis):
If a simple event name such as "click" is provided, all events of that type (both direct and delegated) are removed from the elements in the jQuery set.
and
A handler can also be removed by specifying the function name in the handler argument.
Note that in the latter case you can't specify the function name if the function never had a name in the first place, as in the code in the question where the handler is an anonymous function.
You can use unbind for this .
$('#btnClk).unbind('click');
almost same question
You can do this using off():
$('#btnClk').off('click');
This will remove all click event handlers from the btnClk.

How to trigger a js function with Jquery

I want to trigger this jquery function by using trigger method of JQuery. How can I do that ? Actually I dont even know the trigger method is suitable for user defined functions.
$('a.pop').click(function() {alert('testing'); }
this is not working
$('a').trigger(testtt);
var testtt = function(){ alert('aaa');}
Very similar to the way you install the event handler:
$('a.pop').click();
If you have the name of the event you want to trigger as a string, you can also do it this way:
$('a.pop').trigger('click');
This is also the solution to use if you want to pass crafted data to the event handler -- trigger also accepts a second parameter.
You can trigger a click event on the element by simply running
$('a.pop').click()
$('a.pop').click(), or if you're triggering some dynamic method, or custom event:
$('a.pop').trigger(eventName), e.g: $('a.pop').trigger('click');
Reading from jQuery API, the following should work.
$('a.pop').trigger('click');
.trigger() is used to trigger event handlers (custom or built-in'). Since you bound your function to the "click" handler, you can use trigger like so to call it:
$('a.pop').trigger('click');
jQuery's event binding methods can also be called without parameters to trigger them, which means you can also do this:
$('a.pop').click();

Cancel jQuery event handling

I have setup onclick event handler in the following manner:
element.onclick = function() { /*code */ }
Imagine there are event handlers setup using jQuery method bind() or similar handlers.
$('element').bind('click', function(){/*another function*/})
How can I prevent invoking handler defined with jQuery from the handler I have described in the beginning?
NB stopPropagation() and etc. jQuery's methods doesn't work from that function, because it is passed with native event object.
I'm not 100% sure what you're asking but maybe this will help:
You can create a new event object (compliant with W3C DOM) via jQuery's exposed Event constructor:
For example:
element.onclick = function(e) {
var aBetterEventObject = jQuery.Event(e);
// Now you can do what you want: (Cross-browser)
aBetterEventObject.preventDefault()
aBetterEventObject.isDefaultPrevented()
aBetterEventObject.stopPropagation()
aBetterEventObject.isPropagationStopped()
aBetterEventObject.stopImmediatePropagation()
aBetterEventObject.isImmediatePropagationStopped()
}
EDIT: Reading through your question again, I don't think propagation is the problem - you seem to want to cancel an event handler from running within an event handler - I'm not sure this is possible. You could just unbind all handlers (jQuery(elem).unbind('click')) but I don't think that's what you're after...
try to add the following line in the jQuery event handler:
return false;
Following on from JimmyP's answer. I've tried this
$('#x').click( function(e){
alert('hello');
});
document.getElementById('x').onclick = function(){
$('#x').unbind('click');
alert("goodbye");
}
The jQuery event runs once in this example. I don't think you can rely on the order of handlers being invoked however you define them, so I guess you'll have to accept that the jQuery event might fire once. Adding the onclick first does prevent the jQuery event from firing at all but, as I said, I don't think that's reliable.
Jquery has a method for namespacing events. http://docs.jquery.com/Namespaced_Events
You can add, trigger and remove separate functions bound to the same event via namespaces:
$("a").bind("click.custom1",function(){ ... });
$("a").bind("click.custom2",function(){ ... });
$("a").trigger("click.custom2");
$("a").unbind("click.custom2");
As long as you unbind the namespaced event your normal onclick should be unaffected. You may have to bind two separate namespaces to the click event as above if that doesn't work.

Categories

Resources