Prevent double clicks resulting in double submission of in an HTML forms

Question

My problem was simple: I got to work on an already 5 years old web application with heavy forms and multiple buttons and links everywhere on the pages. And we encountered trouble because a lot of our users were double clicking on buttons and links, often ending in actual double submissions of forms.

I am aware of most solutions usually given to peopole asking for such problems, like saying " for any button on the page, make it being disabled = true after the first click ". Some people also advice to use the dblclick event, ignoring that it is thrown only when there are two click events coming in a short time - meaning that once the dblclick event has been fired it is already too late because two clicks have already occurred. Same goes to the preventDefault() method, which mechanics does not addresses the problem.

But as for the disable on click strategy, I just can't refactor the code of every single page of the application to put onclick handlers on the buttons and links. Plus, most of them already have onclick handlers attached meaning that I won't be able to search and replace or anything like this. And I also don't want to make a jQuery request on every page load that would add a new click event handler on every button and link of the page. That would cost CPU resources and not be efficient anyway because there are some buttons that trigger popups rather than submitting forms and those must be clickable several times, and there are other examples of this kind.

What I am looking for is a simple and generic way to tell the Web Browser "When there is a double-click anywhere on the page, ignore the second click". I really don't understand how come it is not already possible to do so. Most probably because when you find yourself in such situation you are already far from the lines of the good practices but this is not my fault and I have a problem to address.

Answer 1

I finally found quite a simple way to solve the problem that nobody told me about (too simple?). The solution was to use an invisible layer that will occupy all the window, but be disabled by default. You can declare it this way:

<div id="prevent_dbclick" style="z-index: 1300; border: 0 none; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; opacity: 0; position: fixed; display: none;">500</div>

Now you will also need this Javascript function:

function disableDbClick(){
    jQuery(window).click(function(){
        var prevDbDiv = jQuery("#prevent_dbclick");
        prevDbDiv.show(); 
        setTimeout(function(){
            prevDbDiv.hide();
        }, prevDbDiv.html());       
    });
}
window.onload = disableDbClick;

Note that I used jQuery for simplification but if your project don't use jQuery you can easily work it around.

Now just call the function once the page is loaded. The way it works is very simple: whenever there is a click somewhere on the page, the invisible layers comes over the page for 500ms then fade away and any click event in the interval will hit the layer and not the buttons or links, effectively preventing a double submission on a double click. Once the delay is expired people are free to click anywhere again.

The 500ms delay was chosen since it is the delay that Windows use to differentiate a double-click from two successive clicks. I did not hardcoded it in the javascript code because I wanted to be able to change it via a property of the application.

Hope this will help.