click, mousedown, mouseup, dblclick

Test page.

Events overview page.

The click event fires when the user clicks on an element OR activates an element by other means (i.e. the keyboard). It is the most important JavaScript event. The other events on this page are strictly subsidiary.

mousedown
Fires when the user depresses the mouse button.
mouseup
Fires when the user releases the mouse button.
click
Fires when a mousedown and mouseup event occur on the same element.
Fires when the user activates the element that has the keyboard focus (usually by pressing Enter or the space bar).
dblclick
Fires when two mouse click events occur on the same element within a reasonable time.

“click” event is really a misnomer: it should be called the “activate” event. (And the Microsoft activate event is in fact not a click event but a focus event. You’re still with me?)

Don't register click and dblclick events on the same element: it's impossible to distinguish single-click events from click events that lead to a dblclick event.

Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
On the window
 No Yes Yes Yes Yes Yes

Are these events available on the window?

    [an error occurred while processing this directive]
On the document
 Yes Yes Yes Yes Yes

Are these events available on the document?
On form fields and links
 Yes Yes Yes Yes Yes

Are these events available on form fields and links?

  • IE9 doesn’t fire a click event on disabled form fields.
  • Clicking on a select in Safari and Konqueror causes only a mousedown event; no click event fires. In Safari, the next click somewhere else in the document causes only a mouseup event.
  • A click event on a disabled form field does not fire events in Firefox and Safari. Opera fires the mousedown and mouseup events, but not the click event. IE fires mousedown and mouseup, but not click, on the form. All these implementations are considered correct.
On labels

A mousedown, mouseup and click event fire on the label, and then a click event fires on the related form field.

 Yes Yes Yes Yes Yes
On any element
 Yes Yes Yes Yes Yes

Are these events available on any element?
Click as activate
 Yes Yes Yes Yes Yes

A click event should also fire when the user activates an element (such as a link, checkbox or button) through the keyboard.

IE, Firefox and Opera allows users to check radios in the same group by using the arrow keys and the space bar once they've tabbed to one of the radios. In that case the click event fires, too.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac
dblclick
 Yes Yes Yes Yes Yes

Is the dblclick event supported?
Events leading to dblclick
  1. mousedown
  2. mouseup
  3. click
  4. mousedown
  5. mouseup
  6. click
  7. dblclick
 Incomplete Yes Yes Yes Yes Yes

IE 5-8 use the following event order:

  1. mousedown
  2. mouseup
  3. click
  4. mouseup
  5. dblclick
Bubbling
 Yes Yes Yes Yes Yes

These events should bubble up.
Cancel bubble
 Yes Yes Yes Yes Yes

These events should bubble up.
Prevent default
 Incomplete Almost Incomplete Yes Almost Incomplete

All click default actions should be cancelable. That's one of the points of this important event.

  • IE 5-8 don't prevent the default on text inputs and textareas.
  • IE9/10 and Opera incorrectly uncheck radios when you click on another radio in the same group. It correctly doesn’t check the new radio.
  • IE 5-8, Firefox, and Opera don't prevent the default on select boxes.
  • Firefox and Chrome feel that one radio button must be checked. If all are unchecked they’ll check the first one you click on, even if the default is being prevented.
Test IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 7.0 Win FF 6.1 Mac Saf 5.1 Win Saf 5.1 Mac Chrome 14 Win Chrome 13 Mac Opera 11.51 Win Opera 11.51 Mac