元素:click 事件

当定点设备的按钮(通常是鼠标的主键)在一个元素上被按下和放开时,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 (en-US) 非标准 只读

返回指针相对于当前触发事件的层级的横坐标。

MouseEvent.layerY (en-US) 非标准 只读

返回指针相对于当前触发事件的层级的纵坐标。

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 (en-US) 非标准 只读

单击时施加的压力。

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 Standard
# handler-onclick

浏览器兼容性

BCD tables only load in the browser

参见