Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

touchcancel イベントをハンドリングしないと iPad で大変なことになるぞ

結論: iPad は4本指で上にスワイプするとホーム画面に戻る便利機能があります。これをブラウザで行うと touchstart → touchmove → touchcancel の順で発火します。 touchend が永遠に発火しません。

結論で言いたいことは完結してるので、以下はその補足説明です。

iPad の4本指ジェスチャーについて

iPad で4本指まとめて上へスワイプすると、ホームへ戻るかマルチタスク画面を開けます。これがすごく便利で毎日100回くらいやってます。マジです。

4本指以外にも3本指のジェスチャもたくさんあります。さて、もうお分かりかと思いますが、iPad に対応するにはマルチタップ前提でアプリを作る必要があります。

4本指で上ヘスワイプしたときの挙動

4本指でスワイプしようとすると、touchstartがまず発火します。次にtouchmoveが発火します。最後にtouchcancelが発火して終了です。 touchendは呼ばれません

touchstart イベントは3本分がまとめて1回で発火したりします。touchcancel は1回で4本分すべてキャンセルされます。何度か試してみましたがいずれも touchcancel は1回だけでした。

というわけで、touchcancel イベントは iPad に対応する場合は必ず設定しましょう、という話でした。

検証用ページ

今回、これを検証するにあたって touch event をログ表示する簡易ページを作りました。実際に試してみてください。

condescending-browser-ykh54i - CodeSandbox