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

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

構文

このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("dblclick", (event) => {});ondblclick = (event) => {};

イベント型

MouseEvent です。UIEvent およびEvent を継承しています。

イベントプロパティ

親であるUIEvent およびEvent から継承したプロパティもあります。

MouseEvent.altKey読取専用

このマウスイベントが発行されたときにalt キーが押されていた場合はtrue を返します。

MouseEvent.button読取専用

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

MouseEvent.buttons読取専用

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

MouseEvent.clientX読取専用

ビューポート座標におけるマウスポインターの X 座標です。

MouseEvent.clientY読取専用

ビューポート座標におけるマウスポインターの Y 座標です。

MouseEvent.ctrlKey読取専用

このマウスイベントが発行されたときにcontrol キーが押されていた場合はtrue を返します。

MouseEvent.layerX非標準読取専用

このイベントの現在のレイヤーにおける相対の水平座標を返します。

MouseEvent.layerY非標準読取専用

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

MouseEvent.metaKey読取専用

このマウスイベントが発行されたときにmeta キーが押されていた場合はtrue を返します。

MouseEvent.movementX読取専用

前回のmousemove イベントの位置から相対的なマウスポインターの X 座標です。

MouseEvent.movementY読取専用

前回のmousemove イベントの位置から相対的なマウスポインターの Y 座標です。

MouseEvent.offsetX読取専用

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

MouseEvent.offsetY読取専用

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

MouseEvent.pageX読取専用

文書全体からの相対的なマウスポインターの X 座標です。

MouseEvent.pageY読取専用

文書全体からの相対的なマウスポインターの Y 座標です。

MouseEvent.relatedTarget読取専用

もしあれば、イベントの副ターゲットです。

MouseEvent.screenX読取専用

スクリーン座標におけるマウスポインターの X 座標です。

MouseEvent.screenY読取専用

スクリーン座標におけるマウスポインターの Y 座標です。

MouseEvent.shiftKey読取専用

このマウスイベントが発行されたときにshift キーが押されていた場合はtrue を返します。

MouseEvent.mozInputSource非標準読取専用

イベントを発生させた機器の種類（MOZ_SOURCE_* 定数のいずれか）。これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。

MouseEvent.webkitForce非標準読取専用

クリックしたときに適用された圧力です。

MouseEvent.x読取専用

MouseEvent.clientX の別名です。

MouseEvent.y読取専用

MouseEvent.clientY の別名です。

例

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

JavaScript

const card = document.querySelector("aside");card.addEventListener("dblclick", (e) => {  card.classList.toggle("large");});

HTML

<aside>  <h3>カード</h3>  <p>ダブルクリックするとこのオブジェクトをリサイズします。</p></aside>

CSS

aside {  background: #fe9;  border-radius: 1em;  display: inline-block;  padding: 1em;  transform: scale(0.9);  transform-origin: 0 0;  transition: transform 0.6s;  user-select: none;}.large {  transform: scale(1.3);}

結果

仕様書

ブラウザーの互換性

関連情報

• 学習: イベント入門
• auxclick
• click
• contextmenu
• mousedown
• mouseup
• pointerdown
• pointerup