EventTarget事件：dblclick
EventTarget事件 - dblclick
当在单个元素上单击指针设备按钮（例如，鼠标的主按钮）两次时，将触发dblclick事件。
两次单击事件后，dblclick将触发。
| 接口 | MouseEvent |
|---|---|
| 是否冒泡 | 是 |
| 是否可取消 | 是 |
| 目标 | Element |
| 默认操作 | 没有。 |
属性
| 属性 | 类型 | 描述 |
|---|---|---|
target （只读） | EventTarget | 事件目标（DOM树中最顶层的目标）。 |
type（只读） | DOMString | 事件的类型。 |
bubbles（只读） | Boolean | 事件是否正常冒泡。 |
cancelable（只读） | Boolean | 事件是否可以取消。 |
view（只读） | WindowProxy | Document.defaultView（window文件） |
detail（只读） | long（float） | 在短时间内发生的连续点击次数，递增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。 |
示例
此示例在您双击卡片时切换卡片的大小。
HTML
<aside>
<h3>My Card</h3>
<p>Double click to make me big.</p>
</aside>CSS
aside {
background: #fe9;
border-radius: 1em;
display: inline-block;
padding: 1em;
transform: scale(.9);
transform-origin: 0 0;
transition: transform .6s;
user-select: none;
}
.large {
transform: scale(1.3);
}JavaScript
const card = document.querySelector('aside');
card.addEventListener('dblclick', function (e) {
card.classList.toggle('large');
});规范
| 规范 | 状态 | 注释 |
|---|---|---|
| 未知 该规范中“dblclick”的定义。 | Working Draft | |
| 文档对象模型（DOM）级别3事件规范 该规范中“dblclick”的定义。 | Obsolete | 初步定义 |
浏览器兼容性
我们将兼容性数据转换为机器可读的JSON格式。
- 电脑端
| Chrome | Firefox（Gecko） | Internet Explorer | Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| 基本支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 在禁用的表单元素上 | 支持[1] | 不支持 | 支持 | 不支持 | 支持[1] | ？ |
- 移动端
| Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
|---|---|---|---|---|---|---|
| 基本支持 | ? | 支持 | ? | ? | ? | ? |
| 在禁用的表单元素上 | ? | 不支持 | ? | ? | ? | ? |
注释：
[1]仅适用于<textarea>元素和一些<input>元素类型。