零弐壱蜂

[JavaScript] 要素をダブルクリックする方法

背景

JavaScriptで要素をクリックするにはElement.click()を利用するが、ダブルクリックを実現するには少し工夫が必要となる。Element.click()では単一クリックのみしか発火せず、ダブルクリックを実行するdblClick()のようなメソッドは存在しない。

方法

JavaScriptで要素に対してダブルクリックをシミュレートするには、dispatchEvent メソッドを使って dblclick イベントを発火させる必要がある。

コード

以下がダブルクリックを発火させるためのコード例である。

const dblClickEvent = new MouseEvent('dblclick', {
  bubbles: true,
  cancelable: true,
  view: window,
});

element.dispatchEvent(dblClickEvent);

手順

MouseEventでdblclickイベントを生成する

new MouseEvent() を使って、dblclick イベントを生成する。

const dblClickEvent = new MouseEvent('dblclick', {
  bubbles: true,
  cancelable: true,
  view: window,
});
  • type
    • dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup
  • options
    • Eventインターフェイス
      • bubbles
        イベントがバブリングするようにするためtrue
      • cancelable
        キャンセル可能にするためtrue
    • UIEvent
      • view
        デフォルトがnullなため、windowを指定する。

dispatchEventでイベントを発火する

生成した dblclick イベントを対象の要素に対して dispatchEvent を使って発火させる。

element.dispatchEvent(dblClickEvent);

これでユーザーが実際にダブルクリックした場合と同様のイベントが発生する。

参考