【JS】iPhoneでタップの反応が遅いと感じたら

iPhone向け(Androidも？)にゲームなどを作る際、 連続でタップをする可能性のあるインターフェース(例えばADVの会話シーンなど)に、 event.click を使ってしまうと、どうも動きがもっさりとしてサクサク進まない。

そういう時は、event.click ではなく event.touchstart/touchend を使うとサクサク進むようになる。

で、なんでそうなるのか。

iPhone の event.touchend(今回はとりあえずtouchendを使った) と event.click の違いでググってみた。

[ javascript ]iPhone clickイベント | kotaroito： エンジニアLv3日記

どうも event.click には300ms程度のディレイが予め設定されているらしい。

■追記　——————————————————————————- 元記事のリンク先をよく読まずに書いたので、「ディレイが予め設定されているらしい」と書いたものの、 ベンチマークの結果「300msぐらいディレイがある」という感じで、 特にSafariの仕様として明記されてる様子は無かったので、誤解なきよう追記。

Handling Events | Safari Developer Libraryによると、 One-Finger Events では、 onscroll → Information bubble → Double tap → mousemove → click or No events の順にイベントの判定を行っているようなので、 上記サイトの人も書いている通り、

Double tapの判定ないし、他の処理の判定でディレイが「発生している」というのが理由な気がする。

そういうわけなので、タップの反応が遅いと感じたら、event.touchstart/touchend を使いましょう、というメモ。 個人的には touchstart よりも touchend の方が感触的にはいい感じ。