clickとtouchの判別
色々なコンポーネントでのclickイベントが、touch由来mouse由来か簡単に判別したい
指によるtouch由来のclickは
touchstart → touchend → mousemove(1回) → mousedown → mouseup → click
の順でイベントが発火する
面白い事に、touchendの後にmousedownが来る
なんでこんな順序なんだろうshokai.icon
mouseでのclickは
mousemove → mousedown → mouseup → click
document全体にtouch系イベントをしかけておいて、最後にtouchしたタイムスタンプを記録しておく
code:touch-click.js
export const touched = () => (lastTouchedAt = Date.now())
export const isTouch = () => Date.now() - lastTouchedAt < 500
document.addEventListener('touchstart', touched)
document.addEventListener('touchmove', touched)
document.addEventListener('touchend', touched)
touch**から500 msec以内のclickは、isTouch()がtrueを返す
touch由来のclick
onClickイベントハンドラ内でif (isTouch())で判定する
code:editor.js
const onClick = e => {
if (isTouch()) {
// touch click
} else {
// mouse click
}
}
最後にタッチしてから500 msec以内かどうかわかる
まさかタッチしてから500 msec以内にマウスに手を伸ばして、clickしなおすって事は無いだろうshokai.icon
今のところこれで問題あるケースは見つかっていない
touched()の用途
e.stopPropagation()で親にtouch系イベントが伝播されないようにしているコンポーネントがある
そういうのは、touch系イベントハンドラ内でtouched()を明示的に呼び出してもらって、タイムスタンプを更新する
なぜisTap()ではなくisTouch()にしたか
onMouseDownの中でも使う事がある為
touch由来のmousedownというのが存在し、scrapboxではそれを判別したい状況がある
この実装の良い所
onFocusなど、click系ではないイベントの中でも使える
用途