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.
Bubbles | Yes |
Cancelable | Yes |
Interface | MouseEvent
|
Event handler property | onclick
|
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.
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.
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 explicitbackground-color
other thantransparent
- Set
- For IE8 and IE9: Set
filter: alpha(opacity=0);
and an explicitbackground-color
other thantransparent
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 anhref
)<area>
(but it must have anhref
)<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.
Examples
This example displays the number of consecutive clicks on a <button>
.
HTML
<button>Click</button>
JavaScript
const button = document.querySelector('button');
button.addEventListener('click', event => {
button.innerHTML = `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
Specification | Status |
UI Events | Working Draft |
Document Object Model (DOM) Level 3 Events SpecificationThe definition of 'click' in that specification. | Obsolete |
Document Object Model (DOM) Level 2 Events SpecificationThe definition of 'click' in that specification. | Obsolete |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
click event
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 6 Full support 6 Notes' Beginning in Firefox 68, Firefox no longer incorrectly sends a |
IE
Full support 9 |
Opera
Full support 11.6 |
Safari
Full support 3 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 12.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
On disabled form elements |
Chrome Full support Yes Full support Yes Notes' Only works for |
Edge Full support 79 Full support 79 Notes' Only works for |
Firefox
No support No |
IE Full support Yes Full support Yes Notes' Internet Explorer only triggers the |
Opera Full support Yes Full support Yes Notes' Only works for |
Safari
? |
WebView Android Full support Yes Full support Yes Notes' Only works for |
Chrome Android Full support Yes Full support Yes Notes' Only works for |
Firefox Android
No support No |
Opera Android Full support Yes Full support Yes Notes' Only works for |
Safari iOS
? |
Samsung Internet Android Full support Yes Full support Yes Notes' Only works for |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.'
- See implementation notes.
See also
- [[../../../../Learn/JavaScript/Building_blocks/Events|Introduction to events]]
auxclick
contextmenu
dblclick
mousedown
mouseup
pointerdown
pointerup
Element: click event by Mozilla Contributors is licensed under CC-BY-SA 2.5.