JavaScript | マウスの左ボタンの長押しイベントを実装する方法

2023-02-272023-02-28JavaScript イベント,JavaScript

JavaScriptのaddEventListener()メソッドを使ったマウスの左クリックボタンの長押しイベントの実装する方法とサンプルコードを紹介しています。

マウスボタンの長押しイベントを実装する

以下はキーのマウスボタンの長押しイベントを実装した動作サンプルになります。

See the Pen JavaScript | addEventListener key long-press Event by yochans (@yochans) on CodePen.

JavaScriptでマウスの左ボタンの長押しイベントの実装するにはaddEventListener()メソッドの「mousedown」イベントを利用する事ができます。

このサンプルコードでは以下の手順でマウスの左ボタンの長押しイベントを実装しています。

1. setTimeout()メソッドで作成するイベントのIDを作成する
2. addEventListener()メソッドで「mousedown」イベントを発行
3. 先に作成したイベントのIDでsetTimeout()メソッドでイベントを発行する
4. setTimeout()メソッドで長押しする指定時間の指定、時間後に動く処理を書く
5. マウスの左ボタンが離された時のイベントをaddEventListener()メソッドで「keyup」で発行
6. マウスの左ボタンが離された時に、setTimeout()メソッドのイベントIDをクリアする

以下のサンプルコードではマウスの左ボタンが1秒以上長押しされた際に動くイベントを実装しています。

let mouse_ivent_timer_id;

// マウスで左ボタンが押された時
document.querySelector('#target').addEventListener('mousedown', (event) => {
	// タイマーをセットする
	mouse_ivent_timer_id = setTimeout(function () {
		// マウスで左ボタンが長押しされた時の処理
		console.log('マウスで左ボタンが長押しされました。');
	}, 1000); // 長押しと判定する時間（ミリ秒）
});

// マウスで左ボタンが離された時
document.querySelector('#target').addEventListener('mouseup', (event) => {
	// タイマーをクリアする
	clearTimeout(mouse_ivent_timer_id);
});

上記のサンプルコードでは、リンクやボタン要素などでマウスの左ボタンが押された時に発動するデフォルトのイベントは回避していません。

デフォルトのクリックイベントを破棄する場合、event.preventDefault()を利用します。
event.preventDefault()については以下のページにて紹介しています。

関連：JavaScript | デフォルトのイベントをキャンセルする方法 | ONE NOTES

let mouse_ivent_timer_id;

// マウスで左ボタンが押された時
document.querySelector('#target').addEventListener('mousedown', (event) => {
	// デフォルトのイベントを破棄する
	event.preventDefault();
	// タイマーをセットする
	mouse_ivent_timer_id = setTimeout(function () {
		// マウスで左ボタンが長押しされた時の処理
		console.log('マウスで左ボタンが長押しされました。');
	}, 1000); // 長押しと判定する時間（ミリ秒）
});

// マウスで左ボタンが離された時
document.querySelector('#target').addEventListener('mouseup', (event) => {
	// タイマーをクリアする
	clearTimeout(mouse_ivent_timer_id);
});