The click event fires when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.

Bubbles Yes
Cancelable Yes
Interface MouseEvent
Event handler property onclick

If the button is pressed on one element and released on a different one, the event is fired on the most specific ancestor element that contained both.

click fires after the mousedown and mouseup events, in that order.

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.

Example

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.

Specification

Specification Status Comment
Unknown Working Draft Specifies this event as composed.
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 Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "api.Element.click" (depth: 1) to the MDN compatibility data repository.

See also