Javascript 单击IPhone上的延迟并抑制输入焦点

iphone上的webkit浏览器在用户触摸和javascript获得点击事件之间有300毫秒的延迟。发生这种情况是因为浏览器需要检查用户是否进行了双击。我的应用程序不允许缩放，所以双击对我来说没用。许多人不得不解决这个问题，他们通常会处理触摸端事件上的“点击”，然后忽略浏览器生成的点击。但是，似乎不可能抑制发送到输入元素的单击。如果在窗体上方打开一个对话框，然后用户点击“关闭”按钮，当窗体消失时，他们的单击会传递到输入元素，这可能会导致问题

---

（仅适用于iphone）

如果您想获得尽可能快的响应速度，您必须在

touchstart

上捕获事件。否则，你将注定与这个输入滞后

但您必须记住，在touchstart上捕获事件并对其作出响应会使您无法通过将手指拖出响应区域来取消操作

我个人曾在基于PhoneGap html/js的iphone应用程序中使用过它，效果非常好。唯一能给人这种几乎是本土风格的解决方案

现在，关于您的问题-您是否已尝试阻止事件的传播？它应该能解决你的问题

$('.button').bind('touchstart', function(e){
    e.stopPropagation();
    // do something...
});

希望有帮助

---

Tom

我的同事和我开发了一个开源库，用于消除移动Safari中的点击延迟。它将触摸转换为点击，并干净地处理

输入

和

选择

元素的特殊情况

---

就像在正文中实例化它一样简单：

新建FastClick（document.body）

，然后像往常一样监听click事件。

我让Matt的FastClick成为jquery插件：

只是有一个关于onClick处理程序在没有传递必要范围的情况下被调用的注释。我更新了代码以使其正常工作。

---

当输入元素位于重影事件的位置下时，似乎也有问题：焦点事件在未被破坏的情况下被触发。

我在问题中看到两个问题。一个是处理点击延迟，另一个是处理输入焦点。 是的，这两个都必须在移动网络中正确处理

点击延迟有更深层次的原因。本文很好地解释了300毫秒延迟的原因。

谢天谢地，许多图书馆都知道并解决了这个问题。 , , , 及

大多数库都会创建一个名为tap的新事件。您可以使用与单击事件类似的点击事件。这个jquery移动事件处理可能会有所帮助

 $("#tappableElement").tap(function(){
   // provide your implementation here. this is executed immediately without the 300ms delay.
 });

$('#focusElement').bind('touchstart', function(e){
    $(this).focus();
});

$('#focusElement').focus(function(e){
    // do your work here.
});

现在，第二个问题是输入焦点的处理。 这里也有明显的延迟。 这可以通过为一个touchstart或touchend事件立即强制聚焦元素来解决。这个JQuery事件处理可能会有所帮助

 $("#tappableElement").tap(function(){
   // provide your implementation here. this is executed immediately without the 300ms delay.
 });

$('#focusElement').bind('touchstart', function(e){
    $(this).focus();
});

$('#focusElement').focus(function(e){
    // do your work here.
});

您可以在“touchstart”事件处理中执行例如stopPropagation，以避免传播。但我强烈建议不要返回错误；或e.preventDefault，因为这将停止复制/粘贴、选择文本等默认功能

---

如果您停止touchstart上的事件，我认为您破坏了滚动。虽然这可能是最好的解决方案，但您可以停止touchend上的传播，并在touchstart上执行您需要执行的任何操作-据我记忆，输入集中在touchend上，而不是touchstart上，因此它应该可以解决问题。嗨！喜欢你的快速点击脚本！刚刚发现的。然而，我在输入方面遇到了一个问题：当我专注于输入时，iPad的键盘会弹出并立即隐藏起来。。。知道为什么吗？它运行在什么浏览器、设备、操作系统和版本上？嘿，谢谢你的关心。这是iOS5下的iPad（第一个版本），正如你在github页面上所讨论的，这个插件有很多缺陷，不能很好地处理输入字段，etc@Jonathan帮帮忙怎么样？