23

这个 Plunkr 有 2 个链接。左侧的一个使用 ng-click 指令并插入了 on angular-touch 模块。正如 ng-click 的角度触摸模块描述中所说，ng-click 链接不应有 300 毫秒的延迟。但如果你在移动设备上测试它，情况仍然如此。

那么 plunkr 是否会阻止正确的功能，因为它在 iFrame 或类似的东西中执行，或者是否需要将 Fastclick.js 插入到项目中才能使指令正常工作？没看懂，求大神帮忙

示例： http: //plnkr.co/NRRrmMFaIKg2zLu5C1Tg

编辑： angularjs 文档中的示例也不起作用。他们甚至没有插入角触摸模块。

4

3 回答 3

56

Because angulars ngTouch module is only removing the 300ms delay on ng-click directives, i'm using fastclick.js now which harmonates perfectly fine with angular.

At the beginning it did not work for me, because I attached the Fastclick library before its script was loaded, before the DOM was ready. I fixed this by wrapping the function in the run block of my angular app. This function executes code after the DOM is ready.

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

This way is suggested by the latest screencast on the angularjs youtube channel.

于 2014-01-14T12:24:04.067 回答
0

我通过编写自己的指令来解决这个问题，该指令同时监听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();
    });
  };
}]);

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

使用 Fastclick 更容易、更快捷，但它更可定制，并且不需要您加载 Fastclick 代码。

于 2014-12-26T05:57:29.633 回答
0 
   // 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();
            }
          });
        }
      };
    });
于 2018-05-18T22:08:33.323 回答