Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

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:

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.

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 Specification
The definition of 'click' in that specification.
Obsolete
Document Object Model (DOM) Level 2 Events Specification
The definition of 'click' in that specification.
Obsolete

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
click eventChrome Full support YesEdge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Beginning in Firefox 68, Firefox no longer incorrectly sends a click event for buttons other than the primary mouse button; previouly, there were circumstances in which this would occur. One example: middle-clicking a link would send a click to the document's <html> element.
IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
On disabled form elementsChrome Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Edge No support NoFirefox No support NoIE Full support Yes
Notes
Full support Yes
Notes
Notes Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.
Opera Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari ? WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Firefox Android No support NoOpera Android Full support Yes
Notes
Full support Yes
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also

Метки документа и участники

Обновлялась последний раз: Sheppy,