Question

这个Plunkr有2个链接。左侧的那个使用ng-click指令，插入了角度触摸模块。如在ng-click的角度触摸模块描述中所述，ng-click链接不应该有300ms的延迟。但如果你在移动设备上进行测试，情况仍然如此。

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

编辑：angularjs文档中的example也无效。他们甚至没有插入角度触摸模块。

Answer 1

因为angulars ngTouch模块只消除了ng-click指令的300ms延迟，我现在使用的是fastclick.js，它与角度完全协调。

一开始它对我不起作用，因为在DOM准备好之前，我在加载脚本之前附加了Fastclick库。我通过将函数包装在我的角度应用程序的run block中来修复此问题。该函数在DOM准备好后执行代码。

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

这种方式是由angularjs youtube频道上的latest screencast建议的。

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代码。

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

AngularJS：ngTouch 300ms延迟

3 个答案: