バニラJavaScriptでダブルクリックを検出する方法

バニラJavaScript(フレームワークやライブラリに依存しない素のJavaScript)でダブルクリックを検出したい場合は、dblclick イベントリスナーを使用します。

windowオブジェクトでダブルクリックを検出する

以下の例では、window オブジェクトに対してダブルクリックのリスナーを登録しています。これにより、ページ内のどこを素早くダブルクリックしても、その操作が検出されるようになります。

window.addEventListener("dblclick", event => {
  console.log("Double-click detected")
  // Double-click detected
})

特定のDOM要素にイベントリスナーを設定する

dblclick イベントは、ボタンなどの特定のDOM要素にも設定できます。まずはHTML側で対象となる要素を用意します。

<button id="button">Double click me!</button>

次に、JavaScriptでその要素を取得し、イベントリスナーを登録します。

const button = document.getElementById("button")

button.addEventListener("dblclick", event => {
  console.log("Double-click detected")
  // Double-click detected
})

このコードでは、IDが button の要素だけがダブルクリックの対象となり、ページの他の場所をクリックしても反応しません。

ブラウザ対応状況について

dblclick イベントは、デスクトップ・ノートPC向けのすべてのモダンブラウザでサポートされており、Internet Explorer 11でも動作します。

一方で、モバイルデバイスについては、まだすべての環境でサポートされているわけではない点に注意が必要です。スマートフォンやタブレットでの利用を想定している場合は、Mozilla(MDN)が公開している互換性一覧表で最新の対応状況を確認することをおすすめします。

また、モバイル環境でダブルタップを検出したい場合は、dblclick の代わりに touchstart や pointerdown イベントとタイマーを組み合わせて、独自にダブルタップ判定を実装する方法もあります。