本年も宜しくお願いいたします

【jQuery + iOS】iPhoneでclick()イベントが2回タップしないと効かない場合の対策メモ

jQueryでクリックイベントを拾って、色々と処理をするコードを書いていました。

PCで動作を確認している時は問題なかったのですが、

iOS(今回はiPhone7Plus / iOS 12.01.1)で動作確認をした際に、1回目のタップが効かずに、2回目のタップでクリックイベントが実行されるという問題に突き当たりました。

hoverとa要素

ネットを検索してみると、

  • hoverの問題
  • a要素ではないとclick()が効かない

という二つの問題と解決策がありました。

2回タップしないとリンク先に遷移しない場合は、まず上記2つを確認してみる事をおすすめします。

方法は検索すると沢山でてきます。
なぜこの問題が発生するかなども含め、知る事ができますので、
ここでは説明を省きます。

data属性とclick()イベント登録

結局、click()イベントを登録しているセレクターと一緒にdata属性を入れていたのですが、
そのdata属性を外す事で1回目のタップで動作するようになりました。

 ダメだった例)イベント登録しているセレクタ(class=”sample”)とdata属性(data-sample=”sample”)を一緒のaタグに書いている

//ダメだった例
サンプル

解決した例)data属性を削除(他に移した)

//解決した例
サンプル

正しくdata属性とクリックイベント理解していない事が問題だと思いますので、おちついてドキュメントを見えそうと反省しました..。

根本的な原因までたどり着いていないのですが、今後のためにメモとして残しておきます。