2018/11/14
タッチイベント & マウスイベント

スマホのクリックイベント順
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.以下をページに入れる
1 | <meta name="viewport" content="width=device-width"> |
そうなるとダブルタップによるズームイン/ズームアウトが無効になります。
サポートされているブラウザ
3.preventDefault()
タッチイベントを優先し、preventDefault()を呼び出し、
マウスイベントを発生させないようにしています。
参考サイト
TouchEvent と MouseEvent の両方をサポートする
Touch And Mouse
300ms tap delay, gone away
Author Profile

スターフィールド編集部
SHARE