STERFIELD
開発ナレッジ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.以下をページに入れる

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

3.preventDefault()

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

参考サイト

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

WRITER

スターフィールド編集部

この著者の記事を見る

CONTACT

記事の内容について
相談したい方へ

実際の進め方は、状況を伺ってからご提案します。

2営業日以内にご返信します
資料ダウンロード無料相談に申し込む