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?