Cancel jQuery event handling

Question

Hi,

I have setup onclick event handeler in the following manner:

element.onclick = fuction() { /*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 begining?

NB stopPropagation() and etc. jQuery's methods doesn't work from that function, because it is passed with native event object.

Thank you.

Answer 1

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 = fuction(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...

Answer 2

try to add the following line in the jQuery event handler:

return false;

Answer 3

2JimmyP: I have tried this, but seems to be aBetterEventObject will be another object and all of the method calls will be useless. It will be great to get access in the handler to the Event object created by jQuery, thus I will be able to invoke those methods on it.

UPDATED: I have read your remark. unbind() will totally discard handlers. But I wan't to prevent its invocation in certain cases (imagine I put some 'if' clasue in onclick handler)

2Marwan: I can't alter that jQuery event handler, because it may be created not by me (in case I give the code to another guy)

Answer 4

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.

Answer 5

2meouw:

As I have explained, unbind will discard handler alerting 'hello' forever. It is not good :)

the use case can be:

document.getElementById('x').onclick = function() {
  if ( /*some case*/ ) { /* prevent calling function alerting 'HELLO' */ }
}

So when I'll get another click on the element, the case could be false and handler should be invoked. Am I clear? :)

Answer 6

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.