Jonathon Bolster

web developer, programmer, geek

Preventing accidental double clicks on links using jQuery

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) {

    if (!$(this).data('isClicked')) {
        var link = $(this);

        // Your code on successful click

        // Set the isClicked value and set a timer to reset in 3s'isClicked', true);
        setTimeout(function() {
        }, 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.