11 June 2009

mousedown, click and dblclick events

Figuring out what kind of click occurred on an element can be tricky, as browsers treat mousedown, click and dblclick events differently. As I was developing a game in which a user might click on an element several times in a row, I started to experiment with these events. Below are the results represented in a nice visual way.

'd' stands for a mouseDown event
'u' stands for a mouseUp event
'.' signals a click event, and
':' stands for a dblclick event

Click and dblclick events are organized in different rows to make the pattern easier to identify. Event handlers were registered on an A element using in-line "on..." attributes, and the page was tested with a series of quick clicks.

Firefox 2 and Safari 3.2.3 (Win)
: : : :
. . . . . . . .
du du du du du du du du

-- This is a nice and clean pattern
with all possible events fired

Opera 9
: : : : :
. . . . . . . . . .
du du dddu du dddu du dddu du dddu du

-- The case here is complicated by a context menu
appearing after double clicks. Further mouse clicks
(see the mousedown events) close this menu, but do
not lead to click events

IE 6 and 8
: : : : :
. . . . .
du u du u du u du u du u

-- Here, click events appear in lieu of mousedown
events, and doubleclick events appear in lieu of
click events.

It might be tricky to find a direct way to know the number of clicks on an event if they happen in quick succession. The context menu of Opera aside, the number of mouseup events would be accurate. One could also try to combine mousedown, click and doubleclick events using some time measurement, or to use different strategies after browser detection.