iOSにおけるmousedownイベント発火の問題

iOSの一部のバージョンではmousedownハンドラーが正しく動作しないが、他のデバイス（Androidなど）ではmousedownは依然として正常に動作する。

解決策としては、スマートフォンなどのモバイル端末ではmousedownハンドラーを使わずにtouchstartで処理することだが、発火順序に影響が出るかどうかが気になるところだ。もともとclickイベントでは、（フォーカスが外れる要素がある場合）先にblurが発火してからclickイベントが発火するため、これを回避する目的でmousedownで代用していた。

CodePenで簡単な実験を行ってみた：

See the Pen touchstart-test by 愷開 (@kjj6198) on CodePen.

発火順序は touchstart > mousedown > blur になることが確認できた。どうやらtouchstartとmousedownの両方を登録した場合、両方のイベントに対応している環境であれば、touchstart > mousedownの順序で発生するようだ。

僕がネットで調べてみたところ、iOS < 13の時にmousedownイベントが発火せず、iOS 13以降は正常に動作することが分かった。また、iPadの場合はtouchが指によるものかApple Pencilによるものかを判別することもできるらしい。

結論

• iOSでmousedownなどをイベントリスナーにバインドする際は注意が必要で、極力touch系のイベントで代用したほうがいい。
• iOS 13とiOS < 13が分岐点となるため、別途テストを行う必要がある。

ひとまずここに記録しておき、後で詳細な挙動を順次追記していくことにする。