views:

238

answers:

2

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?

+3  A: 

Hello Nick, 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.

Adam Alexander
The documentation on that page says "Note that this will not prevent other handlers on the same element from running."
nickf
Yes very true, glad the link was helpful anyway =)
Adam Alexander
+5  A: 

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

nickf