EventTarget事件：click
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>
- ...