Preventing accidental double clicks on links using jQuery
10 December 2010
I recently answered this question on StackOverflow asking how to prevent someone from clicking a link multiple times.
This is the solution I came up with:
$("a").click(function(e) {
e.preventDefault();
if (!$(this).data('isClicked')) {
var link = $(this);
// Your code on successful click
// Set the isClicked value and set a timer to reset in 3s
link.data('isClicked', true);
setTimeout(function() {
link.removeData('isClicked')
}, 3000);
} else {
// Anything you want to say 'Bad user!'
}
});
You can use jQuery’s data storage methods to assign arbitrary bits of data to specific DOM elements. In this case, when the user clicks a link I assign a property to the element as well as setting a timer to remove it 3 seconds later. This lets me know if the specific element has already been clicked by just calling the data
method.
It’s not a bullet proof solution since it’s incredibly easy to get around if you’re determined enough. However, it is a simple example of how you can use those methods.