Element: dblclick イベント

dblclick イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く二回クリックされたときに発生します。

dblclick は二回の click イベントの後 (展開すると、2組の mousedown および mouseup の後) に発生します。

バブリング あり
キャンセル可能 はい
インターフェイス MouseEvent
イベントハンドラープロパティ ondblclick

この例では、カードをダブルクリックするたびに寸法が切り替わります。

JavaScript

const card = document.querySelector('aside');

card.addEventListener('dblclick', function (e) {
  card.classList.toggle('large');
});

HTML

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

CSS

aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(.9);
  transform-origin: 0 0;
  transition: transform .6s;
}

.large {
  transform: scale(1.3);
}

結果

仕様書

仕様書 状態
UI Events
dblclick の定義
草案
Document Object Model (DOM) Level 3 Events Specification
dblclick の定義
廃止された

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
dblclick eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 6
補足
完全対応 6
補足
補足 Starting in Firefox 68, dblclick events are only sent for the primary mouse button, per the specification.
IE 完全対応 11Opera 完全対応 11.6Safari 完全対応 3WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 6Opera Android 完全対応 12.1Safari iOS 完全対応 1Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報