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

2020-06-102023-02-27JavaScript イベント,JavaScript

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

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

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

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

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

以下のサンプルコードでは、要素のidを取得、その要素にaddEventListener()メソッドでダブルクリックイベントを追加、独自関数doubleClick()が実行されるようにしています。

let ball = document.querySelector('#ball');

ball.addEventListener('dblclick', doubleClick);

// ダブルクリックイベントを実装
function doubleClick(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.

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

let ball = document.querySelector('#ball');

// ダブルクリックイベントを実装
ball.addEventListener('dblclick', doubleClick);

function doubleClick(e) {

	// Shiftキーが押されているかどうかを判定する
	if (e.shiftKey) {
		ball.style.background = '#00C853';
	} else {
		ball.style.background = '#FF3D00';
	}

}

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