16 October 2012

One Click Only

Normal people, quite reasonably, expect buttons and links and other clicky thingies on a web page to work the way they work in other software. For a generation brought up on windows, this means double-clicking.

Alas, double clicking "Buy Now" on a web page might well mean "buy now, and buy now again" - your client doesn't want that, and you don't want the resulting credit card chargebacks and reputation hit.

Enter one_click_only, a teensy weensy jQuery plugin to prevent stuff from being double-clicked. This plugin works by calling event.preventDefault(), so it's not going to do the trick if you have custom javascript for submitting forms. You might need to consider something like event.stopPropagation() for that. But steal some ideas from this, you will figure something out.

This script works by storing the last click time in the DOM node's data. The first click goes through; subsequent clicks are allowed through if they are more than a threshold number of milliseconds later (here, 500ms). To prevent any subsequent clicking, just check if the previous_click is not null, instead of comparing it with now

Use thusly: