AngularJS: ngTouch 300ms 지연

AngularJS: ngTouch 300ms 지연

이 플렁커에는 두 개의 링크가 있습니다.왼쪽에 있는 것은 각도 터치 모듈이 삽입된 상태에서 ng 클릭 지시를 사용하고 있습니다.ng-click을 위한 각도 터치 모듈 설명에서 말한 것처럼, ng-click 링크는 300ms 지연되지 않아야 합니다.하지만 모바일 기기에서 테스트를 해봐도 여전히 그렇습니다.

그렇다면 plunkr은 iFrame 등에서 실행되기 때문에 올바른 기능을 방해하고 있습니까? 아니면 지시문이 올바르게 작동하려면 Fastclick.js를 프로젝트에 삽입해야 합니까?이해가 안 가요, 제발 도와주세요.

예: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

edit: angularjs 문서의 예제도 작동하지 않습니다.그들은 심지어 앵글 터치 모듈을 삽입하지도 않았습니다.

angular sngTouch module은 ng-click 디렉티브에서 300ms 지연만 제거하고 있기 때문에 angular와 완벽하게 조화를 이루는 fastclick.js를 사용하고 있습니다.

처음에는 스크립트가 로드되기 전에 DOM이 준비되기 전에 Fastclick 라이브러리를 첨부했기 때문에 저에게는 효과가 없었습니다.나는 내 각진 앱의 실행 블록에 그 기능을 랩핑하여 이것을 고쳤습니다.DOM이 준비된 후 코드를 실행하는 기능입니다.

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

이 방법은 angularjs youtube 채널의 최신 스크린캐스트에서 제안합니다.

저는 이 두 가지 모두를 들어주는 저만의 지시문을 작성함으로써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 코드를 로드할 필요가 없습니다.

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

언급URL : https://stackoverflow.com/questions/20718020/angularjs-ngtouch-300ms-delay