W3cubDocs

click

The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.

General info

Specification: DOM L3
Interface: MouseEvent
Bubbles: Yes
Cancelable: Yes
Target: Element
Default Action: Varies

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`Boolean`	Whether the event normally bubbles or not
`cancelable` Read only	`Boolean`	Whether the event is cancellable or not?
`view` Read only	`WindowProxy`	`document.defaultView` (`window` of the document)
`detail` Read only	`long` (`float`)	A count of consecutive clicks that happened in a short amount of time, incremented by one.
`currentTarget` Read only	EventTarget	The node that had the event listener attached.
`relatedTarget` Read only	EventTarget	For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.
`screenX` Read only	long	The X coordinate of the mouse pointer in global (screen) coordinates.
`screenY` Read only	long	The Y coordinate of the mouse pointer in global (screen) coordinates.
`clientX` Read only	long	The X coordinate of the mouse pointer in local (DOM content) coordinates.
`clientY` Read only	long	The Y coordinate of the mouse pointer in local (DOM content) coordinates.
`button` Read only	unsigned short	The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
`buttons` Read only	unsigned short	The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). More info.
`mozPressure` Read only	float	The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
`ctrlKey` Read only	boolean	`true` if the control key was down when the event was fired. `false` otherwise.
`shiftKey` Read only	boolean	`true` if the shift key was down when the event was fired. `false` otherwise.
`altKey` Read only	boolean	`true` if the alt key was down when the event was fired. `false` otherwise.
`metaKey` Read only	boolean	`true` if the meta key was down when the event was fired. `false` otherwise.

Example

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // display the current click count inside the clicked div
    event.target.textContent = "click count: " + event.detail;
  }, false);
</script>

Browser compatibility

Internet Explorer

Internet Explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events. Any click events will be fired at the underlying element(s) instead. See this live example for a demonstration.

Known workarounds for this bug:

For IE9 only:
- Set background-color: rgba(0,0,0,0)
- Set opacity: 0 and an explicit background-color other than transparent
For IE8 and IE9: Set filter: alpha(opacity=0); and an explicit background-color other than transparent

Safari Mobile

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

Known workarounds for this bug:

Set cursor: pointer; on the element or any of its ancestors.
Add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>.
Use a typically interactive element (e.g. <a>) instead of one that isn't typically interactive (e.g. <div>).
Stop using click event delegation.

Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):

<a> (but it must have an href)
<area> (but it must have an href)
<button>
<img>
<input>
<label> (but it must be associated with a form control)
<textarea>
This list is incomplete; you can help MDN by doing further testing/research and expanding it.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
On disabled form elements	(Yes)^[1]	No support	(Yes)^[2]	No support	(Yes)^[1]	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?
On disabled form elements	?	No support	?	?	?	?

[1] Only works for <textarea> elements and some <input> element types.

[2] Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.