EventTarget事件:dblclick

2019-01-22 10:41 更新

EventTarget事件 - dblclick

當(dāng)在單個(gè)元素上單擊指針設(shè)備按鈕(例如,鼠標(biāo)的主按鈕)兩次時(shí),將觸發(fā)dblclick事件。

兩次單擊事件后,dblclick將觸發(fā)。

接口MouseEvent
是否冒泡
是否可取消
目標(biāo)Element
默認(rèn)操作沒(méi)有。

屬性

屬性類型描述
target (只讀)EventTarget事件目標(biāo)(DOM樹(shù)中最頂層的目標(biāo))。
type(只讀)DOMString事件的類型。
bubbles(只讀)Boolean事件是否正常冒泡。
cancelable(只讀)Boolean事件是否可以取消。
view(只讀)WindowProxyDocument.defaultViewwindow文件)
detail(只讀)longfloat在短時(shí)間內(nèi)發(fā)生的連續(xù)點(diǎn)擊次數(shù),遞增1。
currentTarget(只讀)EventTarget附加了事件偵聽(tīng)器的節(jié)??點(diǎn)。
relatedTarget(只讀)EventTarget對(duì)于mouseovermouseout,mouseentermouseleave事件:互補(bǔ)事件的目標(biāo)(在mouseenter事件的情況下為mouseleave目標(biāo))。否則為null 
screenX(只讀)long全局(屏幕)坐標(biāo)中鼠標(biāo)指針的X坐標(biāo)。
screenY(只讀)long全局(屏幕)坐標(biāo)中鼠標(biāo)指針的Y坐標(biāo)。
clientX(只讀)long鼠標(biāo)指針在本地(DOM內(nèi)容)坐標(biāo)中的X坐標(biāo)。
clientY(只讀)long鼠標(biāo)指針在本地(DOM內(nèi)容)坐標(biāo)中的Y坐標(biāo)。
button(只讀)unsigned short觸發(fā)鼠標(biāo)事件時(shí)按下的按鈕編號(hào):左按鈕= 0,中按鈕= 1(如果存在),右按鈕= 2。對(duì)于配置為左手使用的鼠標(biāo),其中按鈕動(dòng)作被反轉(zhuǎn),而是從右向左讀取值。
buttons(只讀)unsigned short觸發(fā)鼠標(biāo)事件時(shí)按下按鈕:左按鈕= 1,右按鈕= 2,中間(滾輪)按鈕= 4,第4按鈕(通常,“瀏覽器返回”按鈕)= 8,第5按鈕(通常為“瀏覽器”轉(zhuǎn)發(fā)“按鈕”= 16。如果按下兩個(gè)或更多按鈕,則返回值的邏輯和。例如,如果按下左鍵和右鍵,則返回3(= 1 | 2)。
mozPressure(只讀)float生成事件時(shí)施加到觸摸或制表設(shè)備的壓力量;此值介于 0.0 (最小壓力) 和 1.0 (最大壓力) 之間。 
ctrlKey(只讀)Boolean如果在觸發(fā)事件時(shí)控制鍵已關(guān)閉,則為true,否則為false。
shiftKey(只讀)Boolean如果在事件被觸發(fā)時(shí)shift鍵已關(guān)閉,則為true,否則為false
altKey(只讀)Boolean如果事件被觸發(fā)時(shí)alt鍵已關(guān)閉,則為true,否則為false
metaKey(只讀)Boolean如果在觸發(fā)事件時(shí)meta鍵已關(guān)閉,則為true,否則為false。

示例

此示例在您雙擊卡片時(shí)切換卡片的大小。

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');
});

規(guī)范

規(guī)范狀態(tài)注釋
未知
該規(guī)范中“dblclick”的定義。
Working Draft
 
文檔對(duì)象模型(DOM)級(jí)別3事件規(guī)范
該規(guī)范中“dblclick”的定義。
Obsolete
初步定義

瀏覽器兼容性

我們將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

  • 電腦端

Chrome
Firefox(Gecko)Internet Explorer
Edge
Opera
Safari
基本支持支持支持支持支持支持支持
在禁用的表單元素上支持[1]不支持支持不支持支持[1]?
  • 移動(dòng)端

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

注釋:

[1]僅適用于<textarea>元素和一些<input>元素類型。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)