ダブルクリックのイベントを設定する方法
ダブルクリック用のイベントハンドラに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に達したら、ダブルクリックと判定する。
関連記事
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- class属性値を取得、変更する方法
- 要素のclass属性値を取得、変更、確認する方法をまとめています。
- ダブルタップのイベントを設定する方法
- タッチデバイスでダブルタップを検出します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。