jQuery Multiple Event Handlers - How to Cancel?

jquery event-handling jquery-events
Josh Stodola picture Josh Stodola · Mar 17, 2009 · Viewed 36k times · Source

I have two functions bound to a click event at two different times (using jQuery). The order in which they are fired is significant. They are firing in the correct order. The problem is, when the first function returns false, the second function is still firing!

How can I properly cancel the event?

Example code:

$(document).click(function() { 
  alert('a');
  return false;
});

$(document).click(function() {
  alert('b');
});

You will still see the "b" alert message when clicking the page. This is unacceptable!

Answer

Ken Browning picture Ken Browning · Mar 17, 2009

Use the stopImmediatePropagation function of the jQuery event object.

Keeps the rest of the handlers from being executed. This method also stops the bubbling by calling event.stopPropagation().

$(document).click(function(event) { 
  alert('a');
  event.stopImmediatePropagation();
  return false;
});

$(document).click(function() {
  alert('b');
});

Related questions

How to remove "onclick" with JQuery?

PHP code: <a id="a$id" onclick="check($id,1)" href="javascript:void(0)" class="black">Qualify</a> I want to remove the onclick="check($id,1) so the link cannot be clicked or "check($id,1) won't be fired. …

Read More
Get clicked element using jQuery on event?

I'm using the following code to detect when a dynamically generated button is clicked. $(document).on("click",".appDetails", function () { alert("test"); }); Normally, if you just did $('.appDetails').click() you could use $(this) to get the element that was clicked …

Read More
jQuery preventDefault() not triggered

I have the following code: $(document).ready(function(){ $("div.subtab_left li.notebook a").click(function(event) { event.preventDefault(); return false; }); }); but when I click the element .. it doesn't prevent the default action .. Why? and when modifying the code to: $(…

Read More