元素：dblclick 事件

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2015 年 7 月.

当指向设备按钮（例如鼠标的主按钮）被双击时，将触发dblclick事件；也就是说，当在极短的时间内在单个元素上快速点击两次时。

dblclick在两个click事件（以及扩展，在两对mousedown和mouseup事件）之后触发。

语法

在诸如addEventListener()之类的 方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("dblclick", (event) => {});

ondblclick = (event) => {};

事件类型

一个MouseEvent。继承自UIEvent和Event。

Event UIEvent MouseEvent

事件属性

此接口还继承其父级UIEvent和Event的属性。

MouseEvent.altKey 只读

如果在触发鼠标事件时alt键按下，则返回true。

MouseEvent.button 只读

触发鼠标事件时按下的按钮编号（如果适用）。

MouseEvent.buttons 只读

触发鼠标事件时按下的按钮（如果有）。

MouseEvent.clientX 只读

鼠标指针在视口坐标中的 X 坐标。

MouseEvent.clientY 只读

鼠标指针在视口坐标中的 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.relatedTarget 只读

事件的次要目标（如果存在）。

MouseEvent.screenX 只读

鼠标指针在屏幕坐标中的 X 坐标。

MouseEvent.screenY 只读

鼠标指针在屏幕坐标中的 Y 坐标。

MouseEvent.shiftKey 只读

如果触发鼠标事件时 shift 键处于按下状态，则返回 true。

MouseEvent.mozInputSource 只读

生成事件的设备类型（MOZ_SOURCE_* 常量之一）。例如，这使您可以确定鼠标事件是由实际鼠标还是触摸事件生成（这可能会影响您解释与事件关联的坐标的准确程度）。

MouseEvent.webkitForce 只读

点击时施加的压力量。

MouseEvent.x 只读

MouseEvent.clientX 的别名。

MouseEvent.y 只读

MouseEvent.clientY 的别名。

示例

此示例在您双击卡片时切换卡片的大小。

JavaScript

js
const card = document.querySelector("aside");

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});

HTML

html
<aside>
  <h3>My Card</h3>
  <p>Double click to resize this object.</p>
</aside>

CSS

css
aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}

结果

规范

规范
UI 事件
# event-type-dblclick
HTML 标准
# handler-ondblclick

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅