阅读(2.1k) 书签赞(0) 我要纠错

EventTarget事件：dblclick

2019-01-22 10:41 更新

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>元素类型。

以上内容是否对您有帮助：

← EventTarget事件：compositionupdate

EventTarget事件：error →

写笔记

我要补充