События кликов перестают работать на мобильном телефоне Firefox после вызова функции, требующей много времени - PullRequest
Новая
       9

События кликов перестают работать на мобильном телефоне Firefox после вызова функции, требующей много времени

0 голосов
/ 15 сентября 2018

Все события щелчка (функции щелчка мыши, а также функции щелчка, связанные с простым js через addEventListener) не запускаются после вызова функции, для которой требуется некоторое время вычисления (или рендеринга).

Вещи, которые я заметил после того, как перестали работать события щелчка:

  • Javascript продолжает работать (я проверил его с помощью простой функции setIntervall, которая выводит что-то на консоль).
  • я отлаживаювеб-сайт удаленно с Firefox WebIDE, и в консоли нет ошибок или предупреждений.
  • события щелчка по-прежнему привязаны к элементам, и инициирование события щелчка через консоль с помощью getElementById("...").click() работает.
  • все отлично работает для firefox / chrome /, т. е. для настольной версии.
  • , чтобы заставить события щелчка работать снова, мне нужно перезагрузить страницу.
  • уменьшение нагрузки или удаление зависимостей , "ngMaterial", "ngMessages"предотвратит ошибку
  • консоль перестает печатать «нажал», как только ошибка фиксируется.

Вот минимумНапример, вам, возможно, придется изменить переменную загрузки так, чтобы для расчета потребовалось не менее 5 секунд.Просто нажмите «рассчитать» заголовок, чтобы запустить функцию тяжелой нагрузки.Если он рассчитывает достаточно долго, кнопка «Рассчитать» перестает работать. 

<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>

1 Ответ

0 голосов
/ 18 сентября 2018

Вы захотите отключить перехват кликов, если столкнетесь с подобными проблемами.

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

Вот фиксированный CodePen .Это может быть проверено на мобильном телефоне здесь .

Документацию для этого можно найти здесь .

...