AngularJS: ngTouch 300ms延迟

Question

这个 Plunkr 有两个链接。左边的链接使用了 ng-click 指令并插入了 angular-touch 模块。正如在 angular 触摸模块对于 ng-click 描述中所说，ng-click 链接不应该有 300ms 的延迟。但是如果你在移动设备上测试它，这个问题仍然存在。

所以是 plunkr 阻止了正确的功能，因为它在 iFrame 中执行还是类似的原因，或者需要将 Fastclick.js 插入到项目中才能使指令正确工作？我不明白，请帮忙。

例如: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

编辑：angularjs 文档中的示例也无法正常工作。他们甚至没有插入 angular-touch 模块。

- strangfeld

---

显然，自从angular 1.2.0以来，这仍然是一个问题，尚未解决。幸运的是，你可以只需插入fastclick.js，就能让每个ng-click都快速触发。你只需将fastclick.js文件添加到你的项目中，并将它们的引导代码插入到任何angular之外即可。FYI我已经编辑了示例的plunkr，以测试一些fastclick方法之间的性能差异。如果频繁点击，则ng-click指令会识别最少的点击test。 - strangfeld

嘿！你解决了这个问题吗？ - Mackelito

@Mackelito 由于ngTouch的限制，它只能消除ng-click指令上的300毫秒延迟，所以我现在使用fastclick.js。我遇到的问题是在fastclick库加载之前实例化了Fastclick。因此它没有起作用。将其包装在angular.run()中解决了我的问题，通过在DOM和Angular准备就绪时实例化fastlick。 - strangfeld

Answer 1

因为Angular的ngTouch模块只能消除ng-click指令的300毫秒延迟，所以我现在使用fastclick.js，它与Angular完美协调。

起初它对我无效，因为我在DOM准备就绪之前附加了Fastclick库。我通过将该函数包装在我的Angular应用程序的run block中来修复了这个问题。该函数在DOM准备就绪后执行代码。

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

这种方法是来自于 AngularJS YouTube 频道上的最新视频教程建议。

- strangfeld

---

他什么时候提到的时间戳？我试着快进视频了。 - Danger14

@Danger14，点击http://youtu.be/xOAG7Ab_Oz0?t=20m48s，观看约1分钟，你就会看到它的;) - strangfeld

@Pascalius，您所说的angular tooltip是什么意思？您是指来自angular-ui-bootstrap模块的tooltip指令吗？还是您有其他意思？ - strangfeld

是的，angular-ui-bootstrap的工具提示。当添加tooltip-trigger="click"时，它可以正常工作。 - Pascalius

Answer 2

我通过编写自己的指令来解决这个问题，该指令监听touchstart和mousedown事件（或touchend/mouseup等）。为了去重，当触摸事件发生时，我设置一个标志，如果标志已设置，则忽略所有鼠标事件（因为触摸事件发生在鼠标事件之前，不去重会导致移动设备上出现双重触发）。

appControllers.controller('AppCtrl', ['$scope',
 function($scope) {
  $scope._usingTouch = false;
  /* app code */
}]).directive('lkClick', [function() {
  return function(scope, element, attr) {
    var fn = function() {
      scope.$apply(function() { 
          scope.$eval(attr.lkClick); 
        });
    }

    element.on('touchstart', function(event) {
        scope._usingTouch = true;
        lk();
    });

    element.on('mousedown', function(event) {
      if(!scope._usingTouch)
        lk();
    });
  };
}]);

然后您可以在应用程序的HTML中添加lk-click="javascript()"指令。

使用Fastclick更容易和更快，但这更可定制，并且不需要加载Fastclick代码。

- Luke Knepper

---

它应该可以正常工作，但是你必须在作用域销毁时取消订阅事件，否则你的应用程序将会有内存泄漏。只需使用element.off(<event>)即可。 - kirill.buga

Answer 3

   // Evita doble tap en dispositivos mobiles
    var TIME_BETWEEN_CLICK = 0;
    App.directive('ngSubmit', function () {
      return {
        restrict: 'A',
        replace: false,
        link: function (scope, el, attrs) {
          el.bind('submit', function (e) {
            if ((new Date().getTime() - TIME_BETWEEN_CLICK) > 300) {
              TIME_BETWEEN_CLICK = new Date().getTime();
            } else {
              e.stopImmediatePropagation();
            }
          });
        }
      };
    });

    App.directive('ngClick', function () {
      return {
        restrict: 'A',
        replace: false,
        link: function (scope, el) {
          el.bind('click', function (e) {
            if ((new Date().getTime() - TIME_BETWEEN_CLICK) > 300) {
              TIME_BETWEEN_CLICK = new Date().getTime();
            } else {
              e.stopImmediatePropagation();
            }
          });
        }
      };
    });

- matias ezequiel marani