iOS で、要素をタッチしてもクリックイベントが発生しない問題への対処

業務でウェブサイトを作成していて、iPhone、iPadでフローティングの枠外を押した時に閉じる処理が作用しないという問題に遭遇しました。

$(document).on('click', function() {
    // ポップアップを閉じる処理
});

原因

HTMLで通常クリックが期待される要素以外ではイベントが発生しない。
そのため、クリックイベントを書いてもその処理が行われることがない。

クリックされることが期待される要素

button 要素、a 要素など

クリックされることが期待されない要素

div 要素、span 要素、p 要素 など

解決方法

下記の方法だけではありませんが、最も簡単と思われる方法を２つ挙げます。

1. cursor:pointer のスタイルを指定

こちらは問題を調べたらすぐに出てきた解決方法です。
下記の理由からこちらの解決方法をとることはやめました。

• 実際には見えないが、カーソルが常に指型カーソルになっていると思うと、個人的には気持ち悪い

<style>
.container {
  cursor:pointer;
}
</style>

2. 空のイベントハンドラを指定

html または js にどちらに書いてもかまいませんが、 body よりも下の要素 に指定してください。

htmlに記述する

<div class="container" onclick=""></div>

jsに記述する

$('.container').on('click', function(){});