jQueryのdblclick()をJavaScriptで実装する代替サンプルコード

2023-08-03

jQueryのdblclick()をJavaScriptで実装するには、以下のような代替サンプルコードを使用できます。

// 要素を取得
var element = document.getElementById('yourElementId');

// クリック回数を保持する変数
var clickCount = 0;

// クリックイベントを追加
element.addEventListener('click', function() {
	clickCount++;

	// クリック回数が2回の場合に処理を実行
	if (clickCount === 2) {
	// ここにダブルクリック時の処理を記述

	// クリック回数をリセット
	clickCount = 0;
	}

	// 一定時間経過後にクリック回数をリセットする処理を追加する場合は、以下のコメントアウトを解除
	/*
	setTimeout(function() {
	clickCount = 0;
	}, 500); // 500ミリ秒後にクリック回数をリセット
	*/
});

上記のコードでは、yourElementIdというIDを持つ要素をダブルクリックすると、ダブルクリック時の処理が実行されます。クリック回数は変数clickCountで管理され、クリックイベントが発生するたびにインクリメントされます。クリック回数が2回に達した場合に、ダブルクリック時の処理が実行されます。処理の後、クリック回数はリセットされます。

なお、一定時間経過後にクリック回数をリセットする場合は、コメントアウトされているsetTimeout()の部分を適宜設定してください。上記の例では500ミリ秒後にクリック回数がリセットされるようになっています。