View in English Always switch to English

元素:click 事件

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

当定点设备的按钮(通常是鼠标的主键)在一个元素上被按下和放开时,click 事件就会被触发。

如果在一个元素上按下按钮,而将指针移到元素外再释放按钮,则在包含这两个元素的最具体的父级元素上触发事件。

click 事件会在 mousedown 和 mouseup 事件依次触发后触发。

语法

在类似 addEventListener() 这样的方法中使用事件名称,或设置事件处理器属性。

addEventListener("click", (event) => {});
onclick = (event) => {};

事件属性

该接口同样继承了其父级(UIEvent 和 Event)的属性。

MouseEvent.altKey 只读: 若在按下 alt 键的情况下触发鼠标事件,则返回 true。
MouseEvent.button 只读: 触发鼠标事件时按下的按钮编号(如果适用)。
MouseEvent.buttons 只读: 触发鼠标事件时按下的按钮(如果有按钮被按下)。
MouseEvent.clientX 只读: 鼠标指针在本地(DOM)坐标系中的 X 坐标。
MouseEvent.clientY 只读: 鼠标指针在本地(DOM)坐标系中的 Y 坐标。
MouseEvent.ctrlKey 只读: 若在按下 control 键的情况下触发鼠标事件,则返回 true。
MouseEvent.layerX 非标准只读: 返回指针相对于当前触发事件的层级的横坐标。
MouseEvent.layerY 非标准只读: 返回指针相对于当前触发事件的层级的纵坐标。
MouseEvent.metaKey 只读: 若在按下 meta 键的情况下触发鼠标事件,则返回 true。
MouseEvent.movementX 只读: 返回鼠标指针相对于最后一次 mousemove 事件的 X 坐标。
MouseEvent.movementY 只读: 返回鼠标指针相对于最后一次 mousemove 事件的 Y 坐标。
MouseEvent.offsetX 只读: 返回鼠标指针相对于目标节点内填充边的 X 坐标。
MouseEvent.offsetY 只读: 返回鼠标指针相对于目标节点内填充边的 Y 坐标。
MouseEvent.pageX 只读: 返回鼠标指针相对于整个文档的 X 坐标。
MouseEvent.pageY 只读: 返回鼠标指针相对于整个文档的 Y 坐标。
MouseEvent.relatedTarget 只读: 返回与事件关联的次要目标(如果存在)。
MouseEvent.screenX 只读: 返回鼠标指针在全局(屏幕)坐标系中的 X 坐标。
MouseEvent.screenY 只读: 返回鼠标指针在全局(屏幕)坐标系中的 Y 坐标。
MouseEvent.shiftKey 只读: 若在按下 shift 键的情况下触发鼠标事件,则返回 true。
MouseEvent.mozInputSource 非标准只读: 触发事件的设备类型(一个 MOZ_SOURCE_* 常量)。这可以让你确定鼠标事件是由实际的鼠标还是由触摸事件生成(这可能会影响解析与事件相关联的坐标的准确度)。
MouseEvent.webkitForce 非标准只读: 单击时施加的压力。
MouseEvent.x 只读: MouseEvent.clientX 的别名。
MouseEvent.y 只读: MouseEvent.clientY 的别名。

MouseEvent 对象会被传入到 click 的事件处理器中,其 detail 属性设置了 target 被点击的次数。换句话说,在双击时,detail 是 2;三击时是 3;以此类推。该计数器会在没有任何点击的情况下会很快被重置,而间隔多长的时间则因浏览器和平台而异。间隔时间也可能受到用户偏好设置的影响;例如,无障碍选项可能会延长间隔时间,以便在自适应界面上更轻松地执行多次点击。

Internet Explorer

IE 8 和 9 中存在一个错误,在将 background-color 的计算值为 transparent 的元素覆盖在其他元素之上时,该元素不会收到 click 事件。click 事件将只会在底层元素上触发。参见在线演示。

该错误的解决方案:

仅适用于 IE 9:
- 设置 background-color : rgba(0,0,0,0)
- 设置 opacity : 0 以及为 background-color 设置一个明确的、除 transparent 以外的值。
适用于 IE8 和 IE9:设置 filter: alpha(opacity=0); 以及为 background-color 设置一个明确的、除 transparent 以外的值。

Safari 手机版

safari 手机版 7.0+(也可能是更早的版本)存在一个错误,当一个元素为交互式元素(例如:<div>),且没有直接将事件监听器绑定在它们自身(即,适用事件委托)时,将无法触发在该元素上触发 click 事件。查看在线演示。也可以看 Safari 的可点击元素和可点击元素的定义。

解决方法如下:

为该元素或者祖先元素,设置 cursor : pointer; 样式。
为该元素或者祖先元素(不包括 <body>),设置 onclick="void(0)" 属性。
使用可点击元素如 <a>,代替不可交互元素如 <div>。
不使用 click 的事件委托。

Safari 手机版里,以下元素是交互式的(因此不会受到上述错误的影响):

<a>(需要有 href)
<area>(需要有 href)
<button>
<img>
<input>
<label>(需要与 form 控件关联)
<textarea>
这份清单并不完整,你可以帮助 MDN 做扩展。

示例

该示例会显示对 <button> 的连续点击次数。

HTML

html

<button>Click</button>

JavaScript

const button = document.querySelector("button");
button.addEventListener("click", (event) => {
 button.textContent = `Click count: ${event.detail}`;
});