Stop further event handlers on an element

Question

I'm writing a little jQuery extension that prevents a user from double clicking on a link.

$.fn.preventDoubleClick = function() {     return this.click(function() {         var $t = $(this)             , retVal = $t.data('active')  // check the internal flag         ;         if (retVal || retVal === undefined) { // if ON...             $t.data('active', false);  // set the internal flag to OFF             setTimeout(function() {                 $t.data('active', true);             }, 1000);  // after 1 second, set the internal flag to ON             console.log("allowed");             return true;         } else {  // if OFF...             console.log("blocked");             return false;         }     }); }; 

the problem is that if there are other click event handlers on the elements, they still fire:

$('#myLink').click(function() {     console.log("Clicked"); }); $('#myLink').preventDoubleClick(); 

And now when you double click the link, I get this in my log:

allowed
clicked
blocked
clicked

So basically, I need the click function inside preventDoubleClick to stop all the other event handlers from firing. How can I do this?

Answer 1

Thanks to Adam's link, I was able to see the function I needed: stopImmediatePropagation().

Answer 2

I believe you're looking for event.stopPropagation

EDIT: turns out this was not the correct option for Nick's purposes. Please see his answer.