デザイナーのオッコです。
今から、私が悩んだiPadでの挙動についての解決策をお話ししようと思います。
iPadでプルダウンをタップするとすぐ閉じてしまう
iPadでヘッダメニューにあるプルダウンをタップすると、開いたらすぐ閉じてしまう、というバグの調査を行いました。
ちなみにPCでは正常です。
始めに原因からお話しすると、以下でした。
clickイベントでSlideToggleメソッドが発火する処理の他に、touchendイベントでもSlideToggleメソッドを書いていたためiPadでは二重にイベントが発火されていた。
調べてみるとまずこんな記事が。
私はまずSlideToggleが悪さをしていると見当をつけ、関連した記事を探していました。
そしてこの回答が参考になり、iPad/iPhoneではclickイベントが正常に操作しないとのこと。
私はこの解決策に従い、「cursor: pointer;」をcssにつけようと試みました。
すると、「cursor: pointer;」は既に付与されている……。
そこで調査を進めると、スマホ用イベントtouchendの存在を知りました。
touchendとは、「タップした指が離れたときに発火する」イベントです。
バグの起きているソースコードにもこのイベントが書かれており、デバッグしたところclickイベントの後すぐこちらも発火していたことが発覚しました。
このイベントを削除し、iPadでも期待通りの動作をするようになりました。
PCのエミュレータでも再現しなかったですし、なかなかiPad実機でテストする機会も少ないので意外と気づかないですよね。
以上調査報告でした。
ちなみに解決した後に、似たようなバグに関する記事もいくつか見つけました。もっと早く見つけたかったです。
jQueryで、on()にclickとtouchstartを併記したら、スマホでのタップイベントの動作がおかしくなった
【jQuery】hoverとtouchの共存について模索したこと
ちょっと古いですけど以下の記事も面白かったです。
関連記事紹介
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら
ITツール紹介ページはこちら
