[jQuery]chromeで動いて、safariで動かないコードを修正したい

Question

###前提・実現したいこと
facebook等の、投稿カードの右上、通報や編集などのオプションメニューをイメージしていただきたいのですが、
[ボタンを押して、表示して、表示領域以外のどこかを押すを消える]
を実現したく、下記を書いたのですが、
jQueryを使って、下記コードを書いたのですが、chromeでは動くのにiPhone safariでは動きません。この原因をご指摘いただけますでしょうか？

検索して拾ってきたものに、実際のDOMの構成を組み合わせたのですが、元の「.closest('.btn').length」あたりも理解しきれてないのかもしれません。。。

###html

<button type="button" class="btn-postOption"></button>
<ul class="class active">~略~</ul>

###jQuery

$(document).on('click', function(e) {
  if (!$(e.target).closest('.btn').length || $(e.target).parents().hasClass('class') ) {
     $('.class').removeClass('active');
  }
});

Comments

[m.ts10806]

windows safariではどうですか？

[think49]

OS は iOS7 以上ですか。 http://jquery.com/browser-support/

[nieve]

>mts10806さん　ありがとうございます。　windows safariでは動きました！

[nieve]

＞think49さん　ありがとうございます。　手元にiOS端末を所有しておらず、（クライアントさんからの指摘で。。）すぐ確認ができないのですが、他もろもろ書いてあることは動いているので、OSバージョン×jQueryの問題ではなさそうなのです。。。

[think49]

他もろもろ書いてあることは動いている事はこのコードが動くことの保証にはなりません。実際に動いていないのであれば、確認は必要だと思います。

Answer 1

$(document).on('click', function(e) {

iOS7 Safari には document, document.body までイベントが伝播しない不具合があるようです。

• iOSにおけるclickイベントの発生条件まとめ - hifive

Re: nieve さん

Comments

[nieve]

お～　そうなのですね。。。
その手前で拾えるようにしてみます。
ありがとうございます！

[nieve]

ありがとうございます！body直下階層指定にして、解決いたしました！

Answer 2

iOSでclickイベントを拾おうとすると、特有の癖があります（Qiita）。

cursor: pointerをCSSで当てると解決するかもしれません。

Comments

[nieve]

試してみます！ありがとうございます。

Answer 3

chromeでは動くということであれば、ブラウザ依存のデリケートな仕様による違いなのですから、コードだけを見て答えを探すのは難しいでしょう。

MacとiPhoneを繋げばiPhoneのsafariをデバッグできますので、それで調査してみるのをおすすめします。

[iPhone] iOS6からの新機能！iPhone Safariで表示したページのデバッグがすんごく楽になるWebkit Webインスペクタがスゴい

Comments

[nieve]

ありがとうございます。
開発がwindows 　＆　挙動指摘の端末がクライアントのものなので、実践してみるの難しいのですが
デバッグ、なにか方法がないか動いてみます！