元素: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.

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

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

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

click 事件会在 mousedownmouseup 事件依次触发后触发。

语法

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

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

onclick = (event) => {};

事件类型

事件属性

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

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 事件将只会在底层元素上触发。参见在线演示

该错误的解决方案:

Safari 手机版

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

解决方法如下:

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

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

示例

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

HTML

html
<button>Click</button>

JavaScript

js
const button = document.querySelector("button");

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

结果

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

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
click event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见