JavaScript：クリックイベントがiPhoneで発火しない

管理人さちのお勉強ノート

2019.08.052019.10.09

この記事は約3分で読めます。

記事内に広告が含まれています

こんにちは、さちです。

先日、ディスプレイドット抜けテストの編集をしている時に、JavaScript（jQuery）のクリックイベントが iPhone で発火しない問題に遭遇しました。

解決できたので、今回はその備忘録です。

body のイベントが発火しない

下記のような、 <body> をタップすると背景色が変化する HTML, CSS, JavaScript を書きました。

<body>
  タップで色が変化
</body>

html, body {
  height: 100%;
}

body {
  background-color: white;
  color: black;
}

.color {
  background-color: blue;
  color: white;
}

$('body').click(function() {
  $(this).toggleClass('color');
});

実際のサンプルがこちら。PC では正常に動きますが、iPhone では動きません。
【2019/10/09 追記】iOS 13 では動くようになりました。

サンプル

PC では正常に動作しているので、原因は iPhone 側なのではないかと調べたところ、やはりその通りでした。

<body> に設置したクリックイベントは、iPhone だと発火しません。バグではなく iPhone の仕様です（何でこんな仕様なのかイミワカンナイ）。

仕方ないので、<body> の直下に <div> を追加して、この <div> にクリックイベントを設置します。HTML, CSS, JavaScript はこうなりました。

<body>
  <div>
    タップで色が変化
  </div>
</body>

html, body, div {
  height: 100%;
}

div {
  background-color: white;
  color: black;
}

.color {
  background-color: blue;
  color: white;
}

$('div').click(function() {
  $(this).toggleClass('color');
});

実際のサンプルがこちら。iPhone でも正常に動くようになりました。

サンプル

実は、今回のような問題が発生するのは「click」イベントだけです。

前述の例も、もしイベントの種類が「click」以外、例えば「change」等であれば、iPhone でも正常に動きます。

「click」の場合だけダメ！　というややこしい状態なので、うっかりやってしまいそうになります。気をつけましょう。