元素: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
事件就会被触发。
如果在一个元素上按下按钮,而将指针移到元素外再释放按钮,则在包含这两个元素的最具体的父级元素上触发事件。
语法
在类似 addEventListener()
这样的方法中使用事件名称,或设置事件处理器属性。
addEventListener("click", (event) => {});
onclick = (event) => {};
事件类型
一个 MouseEvent
,继承自 Event
。
事件属性
该接口同样继承了其父级(UIEvent
和 Event
)的属性。
MouseEvent.altKey
只读-
若在按下 alt 键的情况下触发鼠标事件,则返回
true
。 -
触发鼠标事件时按下的按钮编号(如果适用)。
-
触发鼠标事件时按下的按钮(如果有按钮被按下)。
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.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 手机版里,以下元素是交互式的(因此不会受到上述错误的影响):
示例
该示例会显示对 <button>
的连续点击次数。
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