静的なクリックを検出する方法
JavaScriptのクリックイベントは、ボタンを押して、動かしてから離した場合も同じ要素上ならクリックと判定します。そうではなく、ボタンを押して、そこから動かさないで離した場合だけの、静的クリック(static click)だけを検出したい場合は、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。
サンプルコード
静的クリックのサンプルコードです。ボタンを押した時にisStaticが1
になり、そこからポインタを動かすと0
になります。1
のままボタンを離した時だけ処理が実行される仕組みです。
var isStatic = 0 ;
// element = <div></div>
element.onmousedown = function () {
isStatic = 1 ;
}
element.onmousemove = function () {
isStatic = 0 ;
}
element.onmouseup = function () {
if ( isStatic ) {
// 処理内容
}
}
デモ
枠線内の赤い部分をクリックしてみて下さい。静的クリックの場合だけ、カウントアップします。青い部分には、比較用に通常のクリックイベントを設定してあります。
var count = 0 ;
var isStatic = 0 ;
// element = <div></div>
element.onmousedown = function () {
isStatic = 1 ;
}
element.onmousemove = function () {
isStatic = 0 ;
}
element.onmouseup = function () {
if ( isStatic ) {
++count ;
}
}
count = 0
関連記事
- マウスデバイスとタッチデバイスを判別する方法
- ユーザーがマウスデバイスなのか、タッチデバイスなのかを判定します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- UNIXタイムスタンプを取得する方法
- JavaScriptでPHPのtime()、strtotime()と同じようにUNIX TIMESTAMPを取得します。
- 2点の座標の距離を求める方法
- 2点の座標の距離を求める公式を、JavaScriptで表現します。
- ダブルクリックのイベントを設定する方法
- マウスデバイスでダブルクリックを検出します。
- ダブルタップのイベントを設定する方法
- タッチデバイスでダブルタップを検出します。