使用 webkit 运行 iOS 应用程序时选择延迟答案

【问题标题】：Delay in selection when running iOS app using webkit使用 webkit 运行 iOS 应用程序时选择延迟
【发布时间】：2015-11-18 07:24:16
【问题描述】：

我一直致力于在 iOS 上使用 webkit 和 AngularJs 作为前端编写应用程序，因为我在选择页面上的按钮时遇到了延迟。所以我写了一个指令来实现按钮的 touchstart 选择但仍然我在选择时遇到了延迟。

我写的指令如下：

angular.module('test').directive('fastClick',function(){

    // Runs during compile
    return {       
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        link: function($scope, iElm, iAttrs, controller) {

            iElm.bind('touchstart',function(){
                var event = document.createEvent('Event');
                event.initEvent('select', true, true);
                iElm[0].addEventListener('select',true, false);
                iElm[0].dispatchEvent(event);
            });
        }
    };
});

我已禁用网页的缩放功能。

【问题讨论】：

你的意思是选择点击事件吗？
点击出现延迟的任意按钮
在下面查看我的答案。

标签： javascript jquery ios angularjs webkit

【解决方案1】：

正如您在 cmets 中提到的，每次单击按钮时都会遇到延迟。延迟的主要原因是移动浏览器实现了 300 毫秒的延迟来决定用户是否要双击放大页面。我强烈推荐this article，它更详细地解释了这个问题。基本上如下：

在手机或平板电脑等触控设备上，浏览器实现 300 毫秒用户停止触摸显示屏和浏览器执行点击的那一刻。它最初是这样介绍的浏览器可以判断用户是否想要双击放大网页。基本上浏览器会等待大约 300 毫秒来查看用户是否是双击，或者只是在显示屏上点击一次。虽然 300 毫秒看起来很短，令人惊讶的是，当你消除延迟。

如果您不使用 Ionic 等混合移动应用程序框架，一种可能的解决方案是使用FastClick。

FastClick 是一个简单易用的库，可消除 300 毫秒物理点击和移动设备上点击事件触发之间的延迟浏览器。

另外，如果您决定使用 FastClick，我建议您在 run 块中初始化它，如下所示：

angular.module('myModule', [])
  .run(function() {
    FastClick.attach(document.body);
  });

FastCklick 经过大量测试、广泛使用并且在许多设备上运行良好。

另一种选择是使用ngTouch。但是，ngTouch 会覆盖 ngClick，因此只会消除具有 ng-click 属性的元素的延迟。

【讨论】：