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.

冒泡	Yes
可取消	Yes
接口	`MouseEvent`
事件处理程序特性	`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.

用法注意事项

MouseEvent object passed into the event handler for click 有它自己的 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 explicit background-color 除了 transparent
For IE8 and IE9: Set filter : alpha(opacity=0); and an explicit background-color 除了 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 和 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.

范例

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}`;
});

结果

Try making rapid, repeated clicks on the button to increase the click count. If you take a break between clicks, the count will reset.

规范

规范	状态
UI Events	工作草案
DOM (文档对象模型) 3 级事件规范 The definition of 'click' in that specification.	过时
DOM (文档对象模型) 2 级事件规范 The definition of 'click' in that specification.	过时

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`click` event	Chrome 1	Edge 12	Firefox 6 6 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>` 元素。	IE 9	Opera 11.6	Safari 3	WebView Android 1	Chrome Android 18	Firefox Android 6	Opera Android 12.1	Safari iOS 1	Samsung Internet Android 1.0
On disabled form elements	Chrome Yes Yes Only works for `<textarea>` elements and some `<input>` element types.	Edge 79 79 Only works for `<textarea>` elements and some `<input>` element types.	Firefox No	IE Yes Yes Internet Explorer only triggers the `click` event on `<input>` elements of type `checkbox` or `radio` when the element is double-clicked.	Opera Yes Yes Only works for `<textarea>` elements and some `<input>` element types.	Safari ?	WebView Android Yes Yes Only works for `<textarea>` elements and some `<input>` element types.	Chrome Android Yes Yes Only works for `<textarea>` elements and some `<input>` element types.	Firefox Android No	Opera Android Yes Yes Only works for `<textarea>` elements and some `<input>` element types.	Safari iOS ?	Samsung Internet Android Yes Yes Only works for `<textarea>` elements and some `<input>` element types.

在此页