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

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

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

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

hoverとa要素

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

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

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

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

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

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

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

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

<pre>//ダメだった例
<a href="#" class="sample" data-sample="sample">サンプル</a>
<script>
$('.sample').on('click',function(){
	//いろいろ処理したい
});
</script>
</pre>

解決した例）data属性を削除（他に移した）

<pre>//解決した例
<a href="#" class="sample">サンプル</a>
<script>
$('.sample').on('click',function(){
	//いろいろ処理したい
});
</script>
</pre>

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

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