あんパン

こしあん派

iOSとAndroidのブラウザにおけるタッチイベントの発火タイミング

事前説明

  • iOS 8.4
  • Android 4.4.4

TL;DR

  • iOSは妥当な動きをする
  • Androidはタップ操作のときtouchendの後に何故かselectionchangeが発火する
  • Android標準ブラウザには不具合があって、touchmoveが走るとtouchendが発火しない
  • Androidにはgestureイベントが存在しない
  • どれも文字選択後の発火するselectionchangeの後にはtouchendが発火しない

併せて読みたい

masawada.hatenablog.jp

検証

iOS

通常のタッチ操作

[Log] touchstart (test.js, line 6)
[Log] touchmove (test.js, line 12, x93)
[Log] touchend (test.js, line 21)

タップ

[Log] touchstart (test.js, line 6)
[Log] touchend (test.js, line 21)

文字列を選択

[Log] touchstart (test.js, line 6)
[Log] selectionchange (test.js, line 26)
[Log] touchend (test.js, line 21)

文字列を選択後範囲を変更

[Log] touchstart (test.js, line 6)
[Log] selectionchange (test.js, line 26)
[Log] touchend (test.js, line 21)
[Log] selectionchange (test.js, line 26, x2)

gesture操作

[Log] touchstart (test.js, line 2)
[Log] gesturestart (test.js, line 18)
[Log] touchstart (test.js, line 2)
[Log] touchmove (test.js, line 6)
[Log] gesturechange (test.js, line 22)
[Log] touchmove (test.js, line 6)
[Log] gesturechange (test.js, line 22)
[Log] touchmove (test.js, line 6)
[Log] gesturechange (test.js, line 22, x2)
[Log] touchmove (test.js, line 6)
[Log] gesturechange (test.js, line 22)
[Log] touchmove (test.js, line 6)
[Log] gesturechange (test.js, line 22, x5)
[Log] gestureend (test.js, line 26)
[Log] touchend (test.js, line 10)
[Log] touchmove (test.js, line 6)
[Log] touchend (test.js, line 10)

読み取るの難しいが

  • gesurestartの後に2本目のtouchstartが発火している気がした
  • gesturechangeとtouchmoveは交互に襲ってくる

Android(Chrome)

通常のタッチ操作

test.js:6 touchstart
test.js:12 touchmove
test.js:21 touchend

タップ

test.js:6 touchstart
test.js:21 touchend
test.js:26 selectionchange

文字列を選択

test.js:6 touchstart
test.js:26 selectionchange
test.js:21 touchend

文字列を選択後範囲を変更

test.js:6 touchstart
test.js:26 selectionchange
test.js:21 touchend
test.js:26 selectionchange

Android(標準ブラウザ)

通常のタッチ操作

touchstart test.js:6
touchmove test.js:12

タップ

touchstart test.js:6
touchend test.js:21
selectionchange test.js:26

文字列を選択

touchstart test.js:6
selectionchange test.js:26
touchend test.js:21

文字列を選択後範囲を変更

touchstart test.js:6
selectionchange test.js:26
touchend test.js:21
selectionchange test.js:26