调用时间密集型函数后，点击事件停止在 Firefox Mobile 上工作

Question

所有点击事件（ng-click 函数以及通过 addEventListener 与普通 js 绑定的点击函数）在调用需要一些计算（或渲染）时间的函数后不会被触发。

点击事件停止后我注意到的事情：

javascript 保留运行（我用一个简单的 setIntervall 函数测试了它，它向控制台打印了一些东西）。
我使用 Firefox WebIDE 远程调试网站，控制台中没有错误或警告。
点击事件仍然绑定到元素并通过控制台触发点击事件 getElementById("...").click() 有效。
Firefox 一切正常/chrome/即桌面版。
要使点击事件再次起作用，我必须重新加载页面。
减少负载或删除 , "ngMaterial", "ngMessages" 依赖项将防止错误发生
错误一出现，控制台就停止打印 "clicked"。

这是一个最小的例子，您可能需要更改加载变量，使其至少需要 5 秒才能完成计算。只需点击"calculate"标题即可启动重载功能。如果它计算的时间足够长，"calculate" 按钮将停止工作。

<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-controller="heavywork" ng-cloak>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

    <script type="text/javascript">
        document.body.addEventListener("click", function () { console.log("clicked"); });
        document.body.addEventListener("touchend", function () { console.log("touchend"); });

        var app = angular.module('BlankApp', ["ngRoute", "ngMaterial", "ngMessages"]);
        app.controller("heavywork", function ($scope) {
            $scope.count = 0;
            $scope.calculate = function () {
                $scope.count += 1;
                //Edit load here such that it takes at least 5 seconds to finish
                var load = 1000000000;
                for (i = 0; i < load; i++) var x = Math.sqrt(10000);
            }
        })
    </script>

    {{count}}
    <h1 ng-click="calculate()">calculate</h1>
</body>

</html>

Answer 1

如果您运行遇到这样的问题，您将需要禁用点击劫持。

app.config(function($mdGestureProvider) {
  $mdGestureProvider.skipClickHijack();
});

这是固定的 CodePen. It can be tested on mobile here。

可以找到相关文档 here。

调用时间密集型函数后，点击事件停止在 Firefox Mobile 上工作

Click events stop working on firefox mobile after calling a time intensive function

javascript

mobile

angularjs

angularjs-material