JavaScript | ダブルクリックイベント、Shift+ダブルクリック等のイベントを実装する方法

2022-02-01JavaScript,JavaScript イベント

JavaScriptのみでダブルクリックイベント、「Shiftキー」を押しながらのダブルクリックのイベントを実装するサンプルコードの紹介です。

JavaScriptでダブルクリックイベント

JavaScriptでダブルクリックイベントを実装した動作サンプルとサンプルコードです。

動作サンプル

動作サンプルでは、ダブルクリックすることで要素の背景色を変更しています。

See the Pen JavaScript Fire event of double click by yochans (@yochans) on CodePen.

サンプルコード

要素のidを取得、その要素にaddEventListener()関数でダブルクリックイベントを追加、関数double_click()が実行されるようにしています。

let ball = document.getElementById('ball');

ball.addEventListener('dblclick', double_click);

function double_click(e) {
    ball.style.background = '#00C853';
}

JavaScriptでShift+ダブルクリックイベント

JavaScriptで「Shiftキー」を押しながらのダブルクリックイベントを実装した動作サンプルとサンプルコードです。

動作サンプル

動作サンプルでは、ダブルクリックま「Shiftキー」を押しながらダブルクリックすることで要素の背景色をそれぞれ別の色に変更しています。

See the Pen JavaScript Fire event of Shift + double click by yochans (@yochans) on CodePen.

サンプルコード

関数double_click()にてイベントパラメータ(サンプルでは変数eに格納)を取得して、ダブルクリック時にShiftキーが押されているかどうか判別して処理を分岐させています。

let ball = document.getElementById('ball');

ball.addEventListener('dblclick', double_click);

function double_click(e) {
  
  if (e.shiftKey) {
    ball.style.background = '#00C853';
  }else{
    ball.style.background = '#FF3D00';
  }
  
}

e.shiftKey(Shiftキー)だけでなく、e.ctrlKey(Ctrlキー)やe.altKey(Altキー)なども利用する用途もありそうです。