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

Delay in selection when running iOS app using webkit

本文关键字：时延 延迟 选择 应用程序 iOS webkit 运行 使用      更新时间：2023-09-26

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

我写的指令如下：

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

我禁用了网页缩放功能。

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

在手机或平板电脑等触摸设备上，浏览器实现300ms用户停止触摸显示器的时间与浏览器执行单击的瞬间。它最初是这样引入的浏览器可以判断用户是否想双击以放大网页。基本上，浏览器会等待大约300毫秒，以查看用户是否是双击，或者只是在显示器上点击一次。而300ms看起来很短，当你消除延迟。

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

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

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

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

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

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

相关文章：