STERFIELD

タッチイベント & マウスイベント

タッチイベント & マウスイベント

スマホのクリックイベント順

1.touchstart
2.touchmove
3.touchend
4.mouseover (focusを当てた)
5.mousemove (一回のみ)
6.mousedown
7.mouseup
8.click

mousemoveイベントは一回のみ発生しますので、
マウスの移動で出るアニメーションはスマホには出ません。

または、ダブルタップによるズームイン/ズームアウトを検知するため、300ms~350msの遅延が発生します。

解決方法

1.FastClick.jsなどlibraryを使う

2.以下をページに入れる

そうなるとダブルタップによるズームイン/ズームアウトが無効になります。
サポートされているブラウザ

3.preventDefault()

タッチイベントを優先し、preventDefault()を呼び出し、
マウスイベントを発生させないようにしています。

参考サイト

TouchEvent と MouseEvent の両方をサポートする
Touch And Mouse
300ms tap delay, gone away

Author Profile

著者近影

スターフィールド編集部

SHARE

合わせて読みたい