ダブルタップのイベントを設定する方法
ダブルタップをした時にイベントを発生させたい。そんな時は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 ;
}
} ) ;
備考
ダブルタップイベントを実装するには、setTimeout()
を利用します。任意の変数(例ではtapCount)を用意し、その値が2に達した場合に処理を実行する仕組みです。タップをするごとにtapCountの回数を増加させ、setTimeout()で、350ミリ秒(許容期間)後に0に戻します。
- タップが発生したら、回数(tapCount)を加算する。
- 350ミリ秒後に、回数を0に戻す。
- 回数が2に達したら、ダブルタップと判定する。
関連記事
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。
- 小数を四捨五入、切り捨て、切り上げする方法
- 小数の切り捨て、切り上げ、四捨五入をします。また、小数点第n位までの数値を出します。
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- ダブルクリックのイベントを設定する方法
- マウスデバイスでダブルクリックを検出します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。