• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

9. Managing Events > 9.5. Blocking Double Clicks

Blocking Double Clicks

NN 3, IE 4

Problem

You want to prevent a second click on a button or link.

Solution

Use the onclick event handler of the button or link to carry out the intended single-click action, and then redirect the event handler for any subsequent click. For example, the following link submits a form by way of the submitForm( ) function:

<a href="#" onclick="return submitForm( )">Submit</a>

In the event handler function, reassign the function to a second function that performs no action:

function submitForm( ) {
    document.forms["myForm"].submit( );
    submitForm = blockIt;
    return false;
}
function blockIt( ) {
    return false;
}

Discussion

Notice that this recipe makes no mention of the ondoubleclick event handler. That’s because the event is irrelevant for this kind of blocking operation. If you don’t script an ondoubleclick event handler, nothing happens when that event fires. You want to prevent a subsequent click event. This is especially important for form submissions in applications such as e-commerce transactions. If the user clicks the Submit button a second time while the form page is still visible, the server may process both submissions and store the order in the database twice.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint