如何使我的“点击”功能在iOS上正常工作

Question

我有一组作为按钮的div元素。这些按钮通过一个简单的jQuery的click()函数来触发事件，在所有浏览器中都能正常工作，除了iOS浏览器。

例如：

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

和

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

   alert('hi');

});

我不确定为什么这在iOS上不起作用 - 很明显，iOS中没有'点击'。

不幸的是，我没有 iPhone 设备来测试它，但我的客户经常抱怨他们想要点击某些东西，却什么也没发生。

有什么窍门可以让这个东西正常工作吗？

- willdanceforfun

---

我不知道iOs，但如果那些用户使用键盘而没有指针设备（例如鼠标），你的代码对于桌面浏览器用户也不起作用，有些用户出于个人喜好选择这样做，而其他用户则因某种身体原因这样做。你应该使用<a>元素（你仍然可以将它们样式化以达到你想要的外观）。如果你有付费客户希望与iPhone兼容，那么你需要买一个iPhone进行测试——你可以将其写进业务开支中…… - nnnnnn

你的问题缺少太多细节。如果你在使用Mac，可以在开发者模式下使用Safari运行iOS模拟器。顺便问一下，你是在什么时候将click处理程序绑定到.button上的？这是在$.ready被触发之后发生的吗？ - Lior Cohen

“click” 在 iOS 上运行良好，您的问题在其他地方。而且，nnnnnn 是正确的，你也应该考虑使用 <button>。 - mu is too short

我创建了一个 fiddle 并且在 iPhone4 的 Safari 上运行良好。 - mprabhat

对不起，各位，实际上这些点击功能是在 live('click',function) 中加载的，我简化了我的代码-这会改变什么吗？ - willdanceforfun

Answer 1

点击：表示当鼠标在同一元素上按下并释放，或通过键盘激活元素时发生。

从Jquery Bug中可以找到解决方法，只需在元素的CSS中添加"cursor: pointer"，则点击事件将按预期工作。您甚至可以参考在iOS设备上使用Jquery进行点击来进行帮助。

- Ravi Gadag

---

安卓系统没有问题使用自己的主动性，并让“点击”被视为触摸。iOS是新的IE。 - Antony D'Andrea

是的，我刚刚在Safari上处理flexbox，真是噩梦。 - Richard Peck

Answer 2

实际上，被接受的答案对我没有起作用。我尝试使用“cursor:pointer”，onclick =“”甚至将元素转换为锚标记。

我所做的是绑定touchstart事件而不是click事件。为了使它在所有平台上都能正常工作，我不得不进行丑陋的ua欺骗，如下所示：

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
});

- Marek Maurizio

---

完全适用于我！不过我重写了它，没有使用jQuery("body")，而是使用了一个不那么混淆的变量名，不过我猜后者只是为了澄清目的。 - cptstarling

Answer 3

基于Marek的答案，这是我的理解（稍作整理）：

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

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

在标准方面，IT技术行业仍有大量工作要做...

编辑：

在Android手机上没有成功。采取了更为严格的方法：

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' }
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' }

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

- cptstarling

Answer 4

根据Marek的回答，该回答适应设备以触发函数事件。以下是一段代码，可强制在iOS设备上触发点击事件，其中首先有一个touchstart事件：

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

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

- Matthieu Pétel

---

如果用户尝试滚动页面，那么这个操作是否会触发一个点击事件？ - wsgg

可以的。您可以在目标上添加一个检查，以匹配特定元素，仅在该元素上触发点击。 - Matthieu Pétel

Answer 5

你可以使用这个：

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

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

- Abhishek Singh

---

当用户尝试滚动页面时，使用"touchstart"事件可能会意外触发点击事件。 - brettish