iPhone 上的点击延迟和抑制输入焦点

Question

iPhone 上的 webkit 浏览器在用户进行触摸和 javascript 获取单击事件之间有 300 毫秒的延迟。发生这种情况是因为浏览器需要检查用户是否进行了双击。我的应用程序不允许缩放，因此双击对我来说毫无用处。许多人针对这个问题提出了解决方案，他们通常涉及处理触摸结束事件上的“点击”，然后忽略浏览器生成的点击。但是，似乎无法抑制发送到输入元素的点击。如果您有一个在表单上方打开的对话框，然后用户单击关闭按钮，并且当表单消失时，他们的点击将路由到输入元素，这可能会导致问题。

jqtouch 示例（仅适用于 iPhone）

Answer 1

如果您想获得最快的响应速度，则必须在 touchstart 上捕获事件。否则你将注定会遇到这种输入延迟。

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

我个人在我的基于 PhoneGap html/js 的 iphone 应用程序中使用了它，它运行得非常完美。提供这种近乎原生感觉的唯一解决方案。

现在关于您的问题 - 您是否尝试过阻止该事件的传播？它应该可以解决你的问题。

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

希望有帮助，

汤姆

Answer 2

我和我的同事开发了一个名为 FastClick 用于消除 Mobile Safari 中的点击延迟。它将触摸转换为点击，并干净地处理 input 和 select 元素的特殊情况。

就像在正文上实例化它一样简单：new FastClick(document.body)，然后像往常一样监听点击事件。

Answer 3

我将 Matt 的 FastClick 设为 jquery 插件：

stackoverflow 链接

刚刚有一条关于在没有传递必要范围的情况下调用 onClick 处理程序的评论。我更新了代码以使其正常工作。
当输入元素位于幽灵事件的位置下方时，似乎还会出现一个问题：焦点事件会被触发而不会被破坏。

Answer 4

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

1. 点击延迟有更深层次的原因。这篇文章很好地解释了 300 毫秒延迟的原因。
   点击事件的响应能力。

   值得庆幸的是，这个问题是众所周知的，并且已被许多库解决。
   JQTouch、JQuery 移动,
   JQuery.tappable,
   Mootools-mobile,
   和可点击

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

    $("#tappableElement").tap(function(){
      // 在这里提供您的实现。这是立即执行的，没有 300ms 的延迟。
    });
   

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

   $('#focusElement').bind('touchstart', function(e){
       $(this).focus();
   });
   
   $('#focusElement').focus(函数(e){
       // 在这里做你的工作。
   });
   

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