31

デスクトップでこのスニペットを試すと、すべてが機能します。iPad
で試してみても、何も起こりません。

$('body').on('click', '#click', function() {
    alert("This alert won't work on iPad");
});
div { 
  font-size: 24px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">Click here</div>

シンプルな.click()ハンドラーは機能しますが、それは私が望むものではありません。.delegate();とについても同様です。.live()

バグか何かですか？

4

7 に答える 7

34

これは Safari モバイルのバグ/機能です。クリック イベントが本文までバブルしません。

追加onclick=""は既知の回避策ですが、リスナーを の最初の子にアタッチする方が簡単です<body>。

参照: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

于 2012-04-15T19:55:43.323 に答える
30

iOS の本文のカーソル スタイルを「ポインター」に変更すると、すべてが完全に機能します。クリック可能にしたいすべての要素に onclick="" を追加する必要はありません...

<script type="text/javascript">
    $(function() {
        // The trick
        if (/ip(hone|od)|ipad/i.test(navigator.userAgent)) {
           $("body").css ("cursor", "pointer");
        }
        // The test
        $("body").on("click", "#click", function() {
            alert("This also works on iOS !");
        });
    });
</script>
<div id="click">Click here</div>

私はあなたが今何を考えているか知っています:「WTF!」。

于 2012-08-29T13:33:58.060 に答える
12

うまくいかない理由はわかりません。おそらくバグですが、良い回避策があります。onclick=""委任している div に配置するだけで、完全に機能します

<div id="click" onclick="">Click here</div>
<script>
$("body").on("click", "#click", function() {
    alert("This works on iPad");
});
</script>

フィドル

于 2012-04-15T19:09:36.873 に答える
3

http://www.danwellman.co.uk/fixing-jquery-click-events-for-the-ipad/で解決策を見つけました

次のアプローチを実行します。

var isIPad = function() {
    return (/ipad/i).test(navigator.userAgent);
};
var isIPhone = function() {
    return (/iphone/i).test(navigator.userAgent);
};
var isIPod = function() {
    return (/ipod/i).test(navigator.userAgent);
};

クリックイベントハンドラーをバインドする場所は次のとおりです。

var eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "click";
// if you are using jquery-mobile
eventName = (isIPod() || isIPad() || isIPhone()) ? "touchstart" : "vclick";

$(".selector").bind(eventName, function(e) {
    //do something here
});
// or
$(document).on(eventName, ".selector", function(e) {
    //do something here
});

それでおしまい。

于 2012-10-05T14:38:13.307 に答える