ハンバーガーメニューの反応が悪い
iPhoneユーザーから「ハンバーガーメニューの反応が悪い」と言われ、ちょっと調査した内容をメモ。最初にjQueryで以下のように設定していました。
$("#button").on("click", function(){
// clickイベントの処理
});
#buttonはimg要素で、クリックイベントを実装しています。パソコンのブラウザでは特に問題なかったのですが、発売されたばかりのiPhoneXのSafariで動作確認したらやたら反応が悪い。しかもクリックできないわけでもなく、タップしまくったら反応したりと1か0でない感じがプログラマー泣かせだなと思います。Androidは大丈夫。
修正方法
とりあえず試してみたのは以下の方法。
その1：cursorプロパティのpointer値設定
まず試したのが、CSSでその要素のcursor設定にpointer値をセットする方法。
#button {
cursor: pointer;
}
要素をクリック（タッチ）要素と認識させることによりトリガーを発生させようとしてみる。しかしこれは失敗に終わる。うーん。
その2：インラインで要素にonclickイベントを設定
次に試したのが、インラインで空のonclickイベントを記述する方法。
一番最初に記述したjQueryの記述は残しておいて、処理自体もそちらに記述します。クリックイベントを発生させることで……となるかなと思ったけどこれも上手くいかず。うーん。
その3：touchstartイベントで設定
次に試したのが、clickイベントでなくtouchstartイベントで実装してみる。
$("#button").on("touchstart", function(){
// touchstartイベントの処理
});
何となく反応が良くなった気がするのですが、やはりワンタッチでスムーズにイベントを認識してくれない様子。こいつは困った。
最終的に上手くいったパターン
最終的には以下の方法で上手く反応してくれるようになりました。
$(document).on("click", "#button", function() {
// clickイベントの処理
});
＼(^o^)／できた！
バインド先を要素を直接指定（$("#button")）から$(document)に変更して、デリゲートの対象を変更。それから、バインドした要素（$(document)）からclickイベント対象の要素を指定することでスムーズに反応してくれるようになりました。Androidでも動作してくれたので、AndroidとiOSで処理を分ける必要はなさそう。……しかし、Safariは色々あるなぁ。
