dblclick イベントは、ポインティングデバイスのボタン (例えばマウスの第一ボタン) が同じ要素の上で二回クリックされたときに発生します。

dblclick は二回の click イベントの後に発生します。

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

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

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

JavaScript

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

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

結果

仕様書

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

ブラウザーの対応

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本対応 (有) (有) (有) (有) (有) (有)
無効化された form 要素上で (有)[1] 未サポート (有) 未サポート (有)[1] ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 ? (有) ? ? ? ?
無効化された form 要素上で ? 未サポート ? ? ? ?

[1] <textarea> 要素といくつかの <input> 要素でのみ動作します。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,