イナヅマTVログ

[JavaScript] mousedown > mouseupとclickで違うことしたい

| 0件のコメント

わかりにくいかもだけど…
同じDOMElementでマウスアップとクリックを判別し処理分岐をしたいことがありました。

【click】
mousedown -> mouseup の間隔が短い。

【mouseup】
mousedown -> mouseup の間隔が長い。
長押し後のマウスアップ。

マウスを「カチッ」と「ジーーーーーーーカチッ」で処理を分岐させるためのメモ。

(function (window){
	var document = window.document,
		element = document.getElementById("example");
 
	element.addEventListener("mousedown", onMouseDown, false);
 
	var downTime;
 
	function onMouseDown (event) {
		event.stopPropagation();
		event.preventDefault();
 
		downTime = new Date().getTime();
 
		document.addEventlistener("mouseup", onMouseUp, false);
	}
 
	function onMouseUp (event) {
		event.stopPropagation();
		event.preventDefault();
 
		var upTime = new Date().getTime();
		if (upTime - downTime < 200) {
			// click
		}
 
		document.removeEventListener("mouseup", onMouseUp);
	}
}(window));

*クロスブラウザ対策はコードを見やすくするため省略しています。

mousedown -> mouseup の間隔が200ms未満だったら”click”したことにしました。
自分自身の感覚だけど、
マウスでのクリックは概ね100ms未満でした。
トラックパッドのクリック(1本指でのタップでクリックはオフ)は150ms前後になりました。

200msだったら許容値かなぁ。
Systemに設定されているクリック間隔を取得する方法が分からなかった。
無いのかなぁ

コメントを残す

必須欄は * がついています