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 IE8b1 FF 2 FF 3b5 Saf 3.0 Win Saf 3.1 Win Opera 9.26 Opera 9.5b Konqueror 3.5.7
On the window
 No 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

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

Are these events available on form fields and links?

  • Clicking on a select in Safari and Konqueror causes only a mousedown event. 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, Safari and Opera 9.26. Opera 9.5b fires the mousedown and mouseup events, but not the click event. IE fires the events 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 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

Are these events available on any element?
Click as activate
 Yes Yes 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 IE8b1 FF 2 FF 3b5 Saf 3.0 Win Saf 3.1 Win Opera 9.26 Opera 9.5b Konqueror 3.5.7
dblclick
 Yes Yes 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 Yes Untestable

IE uses the following event order:

  1. mousedown
  2. mouseup
  3. click
  4. mouseup
  5. dblclick
Bubbling
 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.)
  • When using addEventListener in the capturing phase Konqueror sometimes leaves out the events on the window.
Cancel bubble
 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 Yes 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 and Firefox don't prevent the default on select boxes.
  • Firefox and Safari don't prevent the default on radio buttons.
  • Konqueror doesn't prevent the default on select boxes when you use the keyboard.

Related events

Event IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b5 Saf 3.0 Win Saf 3.1 Win Opera 9.26 Opera 9.5b 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 and Konqueror incorrectly treat this event as an equivalent of the click event. For instance, when you click on a text input 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 does not fire this event on radios and checkboxes.
Event IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b5 Saf 3.0 Win Saf 3.1 Win Opera 9.26 Opera 9.5b Konqueror 3.5.7