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.

Event IE 5.5 IE 6 IE 7 IE8rc1 as IE7 IE8rc1 as IE8 FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7
On the window
 No Yes Yes Yes Minimal Incomplete

Are these events available on the window?

  • Opera allows registration on the window only when you use attachEvent.
  • Konqueror fires the click event on the window only when you use addEventListener registration. mousedown and mouseup are always fired correctly.
On the document
 Yes Yes Yes Yes Yes Yes

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

Are these events available on form fields and links?

  • 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 Incorrect Too many
  • Opera doesn't fire the click event on the form field.
  • Konqueror also fires a mouseup event on the form field.
On any element
 Yes Yes Yes Yes Yes Yes

Are these events available on any element?
Click as activate
 Yes Yes Yes Untestable Yes Almost Yes Too many

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, except in Opera 9.26.

  • Konqueror also fires a mouseup event when you activate form fields.
Event IE 5.5 IE 6 IE 7 IE8rc1 as IE7 IE8rc1 as IE8 FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7
dblclick
 Yes Yes Yes No Yes Yes No

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 Untestable Yes Yes Untestable

IE uses the following event order:

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

These events should bubble up.

  • When using attachEvent registration, Opera fires the event on the window before the event on the document. (The event isn’t available on the window in any other registration.) An event on the window is equal to an event on the <body> in order to support ancient inline event handlers such as <body onload="something()>.
  • When using addEventListener in the capturing phase Konqueror sometimes leaves out the events on the window.
Cancel bubble
 Yes Yes Yes Yes Yes Yes

These events should bubble up.

  • Firefox 3 and Opera also allow you to cancel the capturing phase.
Prevent default
 Almost Almost Almost Almost Almost Almost

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

  • IE and Konqueror don't prevent the default on text inputs and textareas.
  • IE, Firefox, and Opera don't prevent the default on select boxes.
  • Firefox, Safari, and Chrome don’t prevent the default on the first radio button you click. After that, the default is properly prevented.
  • Konqueror doesn't prevent the default on select boxes when you use the keyboard.
Event IE 5.5 IE 6 IE 7 IE8rc1 as IE7 IE8rc1 as IE8 FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7

iPhone

The iPhone fires the mousedown, mouseup and click events in the correct order on a click (tap), but it either fires all three or none at all. Holding your finger down on an element and waiting for it to lose focus after a while does not fire any events, even though a case could be made for firing the mousedown event as soon as the user’s finger touches the screen.

A double-tap has a special meaning on the iPhone (zoom in/out), so it’s understandable that the dblclick event is not supported.

Related events

Event IE 5.5 IE 6 IE 7 IE8rc1 as IE7 IE8rc1 as IE8 FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7
DOMActivate

Should fire when an element is activated.

Test page.

 No Yes Incorrect and incomplete No Incorrect

A link is activated when the user follows it. A checkbox or radio is activated when it is checked or unchecked.

  • Safari, Chrome and Konqueror incorrectly treat this event as an equivalent of the click event. For instance, when you click on a text input or even on the document in general the event fires. It shouldn’t: clicking on a text input does not activate the text box. Firefox correctly fires a click event only.
  • Safari and Chrome do not fire this event on radios and checkboxes.
Event IE 5.5 IE 6 IE 7 IE8rc1 as IE7 IE8rc1 as IE8 FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7

These compatibility tables are sponsored by

Google