Blog

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

2018.11.13Cat:Blog html5 javascript jQuery 制作

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

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

ShuTzuyu
台湾出身のシュウです。 大学は情報管理と国際企業を専攻、2015年卒業後、来日。 アニメとデザインが好きです。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ