SYNCERのロゴ
アイキャッチ画像

ダブルクリックのイベントを設定する方法

ダブルクリック用のイベントハンドラにdblclickがありますが、ダブルクリックの途中でテキストが選択されてしまうなど、気になる挙動があります。そのため、イベントハンドラのmousedownを利用した別の方法での実現方法を説明します。

サンプルコード

1回目のクリックから350ミリ秒経過する前に次のクリックが行なわれた場合に、ダブルクリックと判定する例です。350の部分を調整することで、ダブルクリック判定をシビアにしたり、緩くしたりと調整できます。

<div id="target"></div>
var clickCount = 0 ;

document.getElementById( "target" ).addEventListener( "mousedown", function( e ) {
	// シングルクリックの場合
	if( !clickCount ) {
		++clickCount ;

		setTimeout( function() {
			clickCount = 0 ;
		}, 350 ) ;

	// ダブルクリックの場合
	} else {
		e.preventDefault() ;
		clickCount = 0 ;
	}
} ) ;

デモ

枠内をダブルクリックすると、背景色が赤くなります。

// グローバル変数
var clickCount = 0 ;

// <div id="target">...</div>などの要素にmousedownイベントを設定
document.getElementById( "target" ).addEventListener( "mousedown", function( e ) {
	// シングルクリックの場合
	if( !clickCount ) {
		// クリック回数を増加
		++clickCount ;

		// 350ミリ秒だけ、クリック回数を維持
		setTimeout( function() {
			clickCount = 0 ;
		}, 350 ) ;

	// ダブルクリックの場合
	} else {
		// ビューポートの変更(ズーム)を防止
		e.preventDefault() ;

		// ダブルクリックイベントの処理内容
		console.log( "ダブルクリックに成功しました!!" ) ;

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

備考

ダブルクリックイベントを実装するには、setTimeout()を利用します。任意の変数(例ではclickCount)を用意し、その値が2に達した場合に処理を実行する仕組みです。クリックをするごとにclickCountの回数を増加させ、setTimeout()で、350ミリ秒(許容期間)後に0に戻します。

  • クリックが発生したら、回数(clickCount)を加算する。
  • 350ミリ秒後に、回数を0に戻す。
  • 回数が2に達したら、ダブルクリックと判定する。
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。