web-dev-qa-db-ja.com

jquery.click（）がiOSで機能しない

HTML：

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS：

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

現在、このスクリプトは私のPCブラウザでは完全に動作しますが、iOSでは動作しません。私もこの解決策を試しました： $（document）.click（）iPhoneでは正しく動作しません。jquery しかし、動作しません。

JQuery 1.8.3を使用していますが、jQuery Mobileは使用していません（使用したくない）。

誰かがこれで私を助けることができますか？

jqueryios
20
Andrei

ボタンにポインターカーソルを追加し、.onを使用してクリックイベントをバインドしてみてください。

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault()
    alert('button1');
});
71
Derek

私はこれに遭遇しました： http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

要するに、iOSブラウザがタッチイベントからクリックイベントを生成するには、次の条件のいずれかを満たす必要があります。

  1. イベントのターゲット要素は、リンクまたはフォームフィールドです。
  2. ターゲット要素、または_ [までの祖先（ただし、<body>には、任意のマウスイベントに対して明示的なイベントハンドラーが設定されています。このイベントハンドラは空の関数である場合があります。
  3. ターゲット要素、またはドキュメントまでのその先祖のいずれかには、カーソルCSS宣言があります。
9
Yacuzo

一般的な解決策は次のようなものです。

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}
2
Ed Kolosovsky

この問題の最も簡単な解決策は、cursor: pointer;をターゲットの要素のスタイル（CSS）に。

#button1 {
    cursor: pointer;
}

または、これはインラインで追加できます。

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>
0
Marc

Yacuzoの答えは最も網羅的です。しかし、私は4番目のトリックを追加したい（私のお気に入り）：

$('div:first').on('click', $.noop);

そして、最初のdivがターゲット要素の親であるかどうかは関係ありません！

0
DUzun