元素：click 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

当定点设备的按钮（通常是鼠标的主键）在一个元素上被按下和放开时，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}`;
});

结果

尝试快速、重复地点击按钮以增加点击次数。如果你在两次点击之间停止一会儿，计数器将会重置。

规范

Specification
UI Events # event-type-click
HTML Standard # handler-onclick

浏览器兼容性

BCD tables only load in the browser