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

Question

我一直致力于在 iOS 上使用 webkit 和 AngularJs 编写应用程序作为前端，我在 selecting [=] 上的按钮时遇到了延迟19=] 我写了一个指令来在按钮的 touchstart 上实现 select 但我仍然在 selection 上延迟。

我写的指令如下：

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

而且我在网页上禁用了缩放功能。

Answer 1

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

On touch devices such as phones or tablets, browsers implement a 300ms delay between the time the user stops touching the display and the moment the browser executes the click. It was initially introduced so the browser can tell if the user wants to double-tap to zoom in on the webpage. Basically the browser waits roughly 300ms to see if the user is double-tapping, or just tapping on the display once. While 300ms seems pretty short, it’s surprising just how noticeable it is when you remove the delay.

一个可能的解决方案，如果您没有使用 Ionic 等混合移动应用程序框架，可以使用 FastClick。

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.

此外，如果您决定使用 FastClick，我建议在 run 块中对其进行初始化，如下所示：

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

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

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

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

Delay in selection when running iOS app using webkit

javascript

jquery

webkit

ios

angularjs