JavaScript - クリックの長押しイベント

JavaScriptでマウスの左クリックボタンの長押しをトリガーにしたイベントを実装する簡単なコード例を紹介しています。

HTMLには、クリックの長押しを検出する対象として<div>タグにid名「target」を指定しています。

<div id="target">クリック<br>長押し</div>

CSSでは、イベントの対象とするためのサイズを設定しています。

#target {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	padding: 10px;
	color: white;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: 1s;
	background: #dc143c;
}

対象とする要素はquerySelector()で指定、addEventListener()で「mousedown」を指定して左クリックボタンが押された事を検出するイベントを実装しています。

イベントタイマーの完了時に対象の「border-radius」を参照して形状を変更しています。

// ターゲットの要素
let target = document.querySelector('#target');

// イベントのタイマーID
let eventTimerId;

// キーダウンイベント
target.addEventListener('mousedown', () => {
	// タイマーをセットしてイベントのタイマーIDを作成
	// 長押しと判定する時間（ミリ秒）
	eventTimerId = setTimeout(function () {
		// マウスで左ボタンが長押しされた時の処理
		if (window.getComputedStyle(target).borderRadius !== '0%') {
			target.style.borderRadius = '0%';
		} else {
			target.style.borderRadius = '50%';
		}

	}, 1000);
});

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