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 完全対応 ありEdge 完全対応 ありFirefox 完全対応 あり
補足
完全対応 あり
補足
補足 Starting in Firefox 68, dblclick events are only sent for the primary mouse button, per the specification.
IE 完全対応 11Opera ? Safari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

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

関連情報