Question

我有一组Div作为按钮。这些按钮有一个简单的jquery click（）函数，可以在除iOS之外的所有浏览器中使用。

例如：

<div class="button">click me</div>

和

$('.button').click(function(){

   alert('hi');

});

我不确定为什么这不能在iOS上运行 - 显然没有点击＆＃39;在iOS中。

不幸的是，我没有自己的iphone设备进行测试，但是我收到了很多客户的抱怨，他们希望点击这些内容而不会发生任何事情。

让这项工作成功的关键是什么？

Answer 1

Click“：表示在同一元素上发生mousedown和mouseup事件或键盘激活了元素。

来自Jquery Bug, 的

有解决办法，只需将"cursor: pointer"添加到元素的CSS中，点击事件就会按预期工作。你甚至可以看到Jquery click on Ios寻求帮助

Answer 2

实际上，接受的答案对我不起作用。我尝试使用＆＃34; cursor：pointer＆＃34;，onclick =＆＃34;＆＃34;，甚至将元素转换为锚标记。

我做的工作是绑定click事件的touchstart事件。为了使它适用于所有平台，我不得不像这样丑陋的欺骗：

var ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

jQuery("body").on(event, '.clickable_element', function(e) {
    // do something here
});

Answer 3

基于Marek's answer这是我对它的看法（它有点清理）：

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

在标准方面，行业还有很多工作要做......

修改

在Android手机上无法解决问题。采取更严格的方法：

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' } if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' } $('.clickable_element').on(pickclick, function(e) { // do something here });

Answer 4

同样基于Marek's answer，它将事件调整到设备以触发一个函数，这里有一个强制触发iOS设备点击的代码，其中首先是一个touchstart事件：

var UA = navigator.userAgent,
iOS = !!(UA.match(/iPad|iPhone/i));

if (iOS) {
   $(document).on('touchstart', function (e) {
       e.target.click();
   });
}

Answer 5

您可以使用：

$('button').bind( "touchstart", function(){
    alert('hi');
});

另一个解决方案是将元素的光标设置为指针，它可以与jQuery live和click事件一起使用。在CSS中设置它。

如何使我的“点击”功能适用于iOS

5 个答案: