EventTarget事件:dblclick

2019-01-22 10:41 更新

EventTarget事件 - dblclick

当在单个元素上单击指针设备按钮(例如,鼠标的主按钮)两次时,将触发dblclick事件。

两次单击事件后,dblclick将触发。

接口MouseEvent
是否冒泡
是否可取消
目标Element
默认操作没有。

属性

属性类型描述
target (只读)EventTarget事件目标(DOM树中最顶层的目标)。
type(只读)DOMString事件的类型。
bubbles(只读)Boolean事件是否正常冒泡。
cancelable(只读)Boolean事件是否可以取消。
view(只读)WindowProxyDocument.defaultViewwindow文件)
detail(只读)longfloat在短时间内发生的连续点击次数,递增1。
currentTarget(只读)EventTarget附加了事件侦听器的节​​点。
relatedTarget(只读)EventTarget对于mouseovermouseoutmouseentermouseleave事件:互补事件的目标(在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]
  • 移动端

AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持?支持????
在禁用的表单元素上?不支持????

注释:

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号