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

2017/06/22

ダブルタップをした時にイベントを発生させたい。そんな時はtouchstartイベントを応用しましょう。

サンプルコード

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

<div id="target"></div>

var tapCount = 0 ;

document.getElementById( "target" ).addEventListener( "touchstart", function() {
	// シングルタップ判定
	if( !tapCount ) {
		++tapCount ;

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

	// ダブルタップ判定
	} else {
		e.preventDefault() ;
		tapCount = 0 ;
	}
} ) ;

デモ

枠内をダブルタップすると、赤くなります。タッチデバイスで試してみて下さい。

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

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

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

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

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

		// タップ回数をリセット
		tapCount = 0 ;
	}
} ) ;