Many web applications assume the user is patient and not trigger-happy. The result of this assumption is that often things get bad when links are double-clicked. There is an easy workaround for this, assuming that the users of the application have JavaScript turned on.
Please note that this page was designed for Mozilla Firefox. However, the code is generic enough that it'll work on many browsers with only slight modifications.
The button
Here you'll see a button. Try clicking on it.
You'll see that the window is temporarily darkened while the
page loads. A transparent <div> is layered on
top of the entire page, preventing the user from clicking on any
link while the page loads.
The pros & cons
The pros:
- Links/buttons can only be clicked once.
- Links only need a certain class name to become a single-click link.
- The page itself needs to modification at all, the haze-div is added through JavaScript
The cons:
- JavaScript is required. Usually this is already a requirement of the web application itself, so this isn't much of an issue.
- Keyboard navigation isn't blocked by this method.
The code
The code is rather trivial. Check out the page source of this page to see how it's done.
The code has been written in such a way that JavaScript is not required for the basic functionality of the button. Without JavaScript, it simply works as a regular link. Of course, your application won't be protected from double-clickers that way, but IMHO it's important to rely on JavaScript as least as possible for things as simple as following a link.