ハンバーガーメニューの反応が悪い

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は色々あるなぁ。