スポンサーリンク

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

この記事は約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 では動くようになりました。

サンプル

 

原因は iPhone の仕様

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」イベントだけです。

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

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

コメント

タイトルとURLをコピーしました