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 回答
12

在iOS上，没有光标样式就没有事件冒泡。
因此，在您的 CSS 中，您需要添加cursor: pointer;到元素中。

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

我知道很久以前就有人问过这个问题，但我认为一个简单的 CSS 解决方案可能会有所帮助。

于 2014-11-13T20:57:32.267 回答
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);
};

并在您绑定 click-event-handler 的位置执行此操作：

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 回答
0

我在 iPhone 5C 及以下机型上遇到了这个问题。
这对我有用：

body {
  cursor:pointer;
}
于 2016-02-16T12:45:29.150 回答
0

我在 html 正文前附加一条消息时遇到问题。我在 [ jQuery 'click' 事件在 iOS Safari 上不起作用？

我用这个

$('body').on('click touchstart', 'someselect', function(){})

它适用于 iPhone 4S 和 iPhone 5S

于 2016-10-06T08:54:58.293 回答