MooTools and Double Clicks

Single and double clicks can both be handled in Javascript, but allowing for both to be fired on the same element presents some complications. There are two main ways of approaching the problem, each with problems to be aware of.

Exclusive Click/Double Clicks

The exclusive firing will only do either a single, or double click. The single click is sets up a 250 millisecond delay on the actual firing of the clickonce event. If the delay expires, the event fires as normal. A second event, the clicktwice, expands on Javascript's normal onDblClick event and clears the delayed single click, thus allowing the double click event to be the only one to fire.

The drawback here is that single clicks will wait 250 milliseconds before firing, giving the application a slightly laggy feeling. This model would be used in applications where the single/double click have contrasting purposes.

Possible Applications:

• A single button to either increment, or decrement a value (think the talent tree calculators for WoW)

References and Credits

This taken almost exactly from the old MooTools forums and the users iyeat, souldreamer, and EmEhRKay.

Single Fires First

This is a different model that locks out single click events for 250 milliseconds, allowing the double click to fire, but still letting the initial single click fire as well. This is better suited for applications where the single/double click have a linked purpose, and the double click makes sense as an escalation of the single event.

Possible Applications

• A file list where the first click will select an item, and the second will either download or open the file.
• A list where a single click will select one item, and the double click will select all.

Code

In the condition function, the first type checking line is kind of optional, most browsers will evaluate NaN or undefined to less than 250 correctly, but there might be some that desire a bit tighter type checking.

Overloading Basic onClick/onDblClick events

If you want, the base click and dblClick behavior can be extended with the above behaviors. Be forewarned that this will affect all elements where either a click or dblClick event is defined.

Single Fires First Code

This will make all onClick events lockout on that clicked element for 250 milliseconds This is pretty unobtrusive and most people would never notice.

Exclusive Single/Double Click Events

This will add a 250 millisecond delay to all single click events on the page, giving the double click time to fire and remove the delayed single click. This will give all onClick events a laggy feel. It's probably better to not use this to override the basic click/dblclick and leave these as custom events, only handled where needed.

Final Notes

250 Milliseconds

The value of 250 milliseconds was chosen rather arbitrarily. It's roughly long enough to allow a double click to register, but short enough to not get in the way of multiple, distinct single clicks. If the user has their system double click speed adjusted either extremely fast or extremely slow, this value may cause some issues, but I haven't really tested that.

Double Clicks on the Interwebs

Double Click behavior is something not used in standard web design and web interfaces. We've all seen users that double click every thing, and ran into the issues that can cause (double submitting forms). Other users are well aware and used to not double clicking anything in web pages. Given this, adding double clicking into an interface design should be done carefully and should behave in expected ways to the user. In the end, perhaps the best way to handle double clicks is simply to not, to rework the interface so they aren't used.