阅读(2546) 赞(7)

EventTarget事件：click

2019-01-19 14:30:51 更新

EventTarget事件 - click

当在单个元素上按下并释放指示设备按钮（例如，鼠标的主按钮）时，click事件触发。如果按下一个元素上的按钮并在另一个元素上释放，则会在包含这两个元素的最具体的祖先元素上触发该事件。

按顺序单击mousedown和mouseup事件后触发click。

接口	`MouseEvent`
同步/异步	同步
是否冒泡	是
是否可取消	是
目标	`Element`
组成的	是
默认操作	不定

属性

属性	类型	描述
`target`（只读）	`EventTarget`	事件目标（DOM树中最顶层的目标）。
`type`（只读）	`DOMString`	事件的类型。
`bubbles`（只读）	`Boolean`	事件是否正常冒泡
`cancelable`（只读）	`Boolean`	事件是否可以取消
`view`（只读）	`WindowProxy`	`Document.defaultView`（`window`文件）
`detail`（只读）	long（浮点）	在短时间内发生的连续点击次数，递增1。
`currentTarget`（只读）	`EventTarget`	附加了事件侦听器的节点。
`relatedTarget`（只读）	`EventTarget`	对于`mouseover`，`mouseout`，`mouseenter`和`mouseleave`事件：互补事件的目标（在`mouseenter`事件的情况下为`mouseleave`目标）。否则为`null`。
`screenX` 只读	`long`	全局（屏幕）坐标中鼠标指针的X坐标。
`screenY` 只读	`long`	全局（屏幕）坐标中鼠标指针的Y坐标。
`clientX` 只读	`long`	鼠标指针在本地（DOM内容）坐标中的X坐标。
`clientY` 只读	`long`	鼠标指针在本地（DOM内容）坐标中的Y坐标。
`button` 只读	`unsigned short`	触发鼠标事件时按下的按钮编号：左按钮= 0，中按钮= 1（如果存在），右按钮= 2。对于配置为左手使用的鼠标，其中按钮动作被反转，而是从右向左读取值。
`buttons` 只读	`unsigned short`	触发鼠标事件时按下按钮：左按钮= 1，右按钮= 2，中间（滚轮）按钮= 4，第4按钮（通常，“浏览器返回”按钮）= 8，第5按钮（通常为“浏览器”转发“按钮”= 16。如果按下两个或更多按钮，则返回值的逻辑和。例如，如果按下左键和右键，则返回3（= 1 \| 2）。
`mozPressure` 只读	`float`	生成事件时施加到触摸或制表设备的压力量；此值介于 0.0 (最小压力) 和 1.0 (最大压力) 之间。
`ctrlKey` 只读	`Boolean`	如果在触发事件时控制键已关闭，则为`true`，否则为`false`。
`shiftKey` 只读	`Boolean`	如果在事件被触发时shift键已关闭，则为`true`，否则为`false`。
`altKey` 只读	`Boolean`	如果事件被触发时alt键已关闭，则为`true`，否则为`false`。
`metaKey` 只读	`Boolean`	如果在触发事件时meta键已关闭，则为`true`，否则为`false`。

示例

此示例显示<button>上的连续点击次数。

HTML

<button>Click</button>

JavaScript的

const button = document.querySelector('button');

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

规范

规范	状态	注释
未知	Working Draft	将此事件指定为组合。
文档对象模型（DOM）级别3事件规范该规范中“clickclick”的定义。	过时的
文档对象模型（DOM）级别2事件规范该规范中“单击”的定义。	过时的	初步定义。

浏览器兼容性

我们将兼容性数据转换为机器可读的JSON格式。

电脑端

	Chrome	Firefox（Gecko）	Internet Explorer	Edge	Opera	Safari
基本支持	支持	支持	支持	支持	支持	支持
在禁用的表单元素上	支持[1]	不支持	支持[2]	不支持	支持	？

注释：

[1]仅适用于<textarea>元素和某些<input>元素类型。

[2] Internet Explorer仅在双击类型为checkbox或radio的<input>元素时触发click事件。

移动端

	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本支持	?	支持	?	?	?	?
在禁用的表单元素上	?	不支持	?	?	?	?

Internet Explorer

Internet Explorer 8和9会受到一个bug的影响，其中，覆盖在其他元素之上的具有transparent的计算background-color的元素将不会接收click事件。任何click事件都将在底层元素上触发。

这个bug的已知解决方法：

仅适用于IE9：
- 设置background-color: rgba(0,0,0,0)
- 设置opacity: 0和transparent以外的显示background-color
对于IE8和IE9：设置filter: alpha(opacity=0);和transparent以外的显示background-color

Safari Mobile

这个bug的已知解决方法：

在元素或其任何祖先上设置cursor: pointer;
将虚拟onclick="void(0)"属性添加到元素或其任何祖先，但不包括<body>。
使用典型的交互元素（例如，<a>）而不是一个典型的非交互元素（例如，<div>）。
停止使用click 事件委派。

Safari Mobile认为以下元素通常是交互式的（因此它们不受此错误的影响）：

<a>（但必须有href）
<area>（但必须有href）
<button>
<img>
<input>
<label> （但必须与表单控件关联）
<textarea>
...

← EventTarget事件：blur

EventTarget事件：compositionstart →