Element: click event
An element receives a click
event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
click
fires after both the mousedown
and mouseup
events have fired, in that order.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("click", (event) => {});
onclick = (event) => {};
Event type
Event properties
This interface also inherits properties of its parents, UIEvent
and Event
.
-
MouseEvent.altKey
Read only
-
Returns true
if the alt key was down when the mouse event was fired.
-
MouseEvent.button
Read only
-
The button number that was pressed (if applicable) when the mouse event was fired.
-
MouseEvent.buttons
Read only
-
The buttons being pressed (if any) when the mouse event was fired.
-
MouseEvent.clientX
Read only
-
The X coordinate of the mouse pointer in local (DOM content) coordinates.
-
MouseEvent.clientY
Read only
-
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
-
MouseEvent.ctrlKey
Read only
-
Returns true
if the control key was down when the mouse event was fired.
-
MouseEvent.layerX
Non-standard Read only
-
Returns the horizontal coordinate of the event relative to the current layer.
-
MouseEvent.layerY
Non-standard Read only
-
Returns the vertical coordinate of the event relative to the current layer.
-
MouseEvent.metaKey
Read only
-
Returns true
if the meta key was down when the mouse event was fired.
-
MouseEvent.movementX
Read only
-
The X coordinate of the mouse pointer relative to the position of the last mousemove
event.
-
MouseEvent.movementY
Read only
-
The Y coordinate of the mouse pointer relative to the position of the last mousemove
event.
-
MouseEvent.offsetX
Read only
-
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
-
MouseEvent.offsetY
Read only
-
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
-
MouseEvent.pageX
Read only
-
The X coordinate of the mouse pointer relative to the whole document.
-
MouseEvent.pageY
Read only
-
The Y coordinate of the mouse pointer relative to the whole document.
-
MouseEvent.relatedTarget
Read only
-
The secondary target for the event, if there is one.
-
MouseEvent.screenX
Read only
-
The X coordinate of the mouse pointer in global (screen) coordinates.
-
MouseEvent.screenY
Read only
-
The Y coordinate of the mouse pointer in global (screen) coordinates.
-
MouseEvent.shiftKey
Read only
-
Returns true
if the shift key was down when the mouse event was fired.
-
MouseEvent.mozPressure
Non-standard Deprecated Read only
-
The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0
(minimum pressure) and 1.0
(maximum pressure). Instead of using this deprecated (and non-standard) property, you should use PointerEvent
and look at its pressure
property.
-
MouseEvent.mozInputSource
Non-standard Read only
-
The type of device that generated the event (one of the MOZ_SOURCE_*
constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
-
MouseEvent.webkitForce
Non-standard Read only
-
The amount of pressure applied when clicking.
-
MouseEvent.x
Read only
-
Alias for MouseEvent.clientX
.
-
MouseEvent.y
Read only
-
Alias for MouseEvent.clientY
.
Usage notes
The MouseEvent
object passed into the event handler for click
has its detail
property set to the number of times the target
was clicked. In other words, detail
will be 2 for a double-click, 3 for triple-click, and so forth. This counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. The interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces.
Examples
This example displays the number of consecutive clicks on a <button>
.
HTML
JavaScript
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
button.textContent = `Click count: ${event.detail}`;
});
Result
Try making rapid, repeated clicks on the button to increase the click count. If you take a break between clicks, the count will reset.
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
click_event |
1 |
12 |
6Beginning in Firefox 68, Firefox no longer incorrectly sends a click event for buttons other than the primary mouse button; previously, there were circumstances in which this would occur. One example: middle-clicking a link would send a click to the document's <html> element. |
9 |
11.6 |
3 |
4.4 |
18 |
6 |
12.1 |
1 |
1.0 |
type_pointerevent |
92 |
92 |
NoSee bug 1675847. |
No |
78 |
NoSee bug 218665. |
92 |
92 |
NoSee bug 1675847. |
65 |
NoSee bug 218665. |
16.0 |
See also