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

静的なクリックを検出する方法

JavaScriptのクリックイベントは、ボタンを押して、動かしてから離した場合も同じ要素上ならクリックと判定します。そうではなく、ボタンを押して、そこから動かさないで離した場合だけの、静的クリック(static click)だけを検出したい場合は、onmousedown、onmousemove、onmouseupのイベントを組み合わせましょう。

サンプルコード

静的クリックのサンプルコードです。ボタンを押した時にisStatic1になり、そこからポインタを動かすと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

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月6日 (日)
コンテンツを公開しました。