web-dev-qa-db-ja.com

AngularJS：ngTouch 300msの遅延

このPlunkrには2つのリンクがあります。左側の1つは、on-angular-touchモジュールが挿入されたng-clickディレクティブを使用しています。 angular ng-clickのタッチモジュールの説明で述べたように、ng-clickリンクの遅延は300ミリ秒ではありません。ただし、モバイルデバイスでテストする場合は、これが当てはまります。

PlunkrはiFrameまたはそのようなもので実行されるため、またはディレクティブが正しく機能するためにプロジェクトにFastclick.jsを挿入する必要があるため、正しい機能を妨げていますか？わかりません、助けてください。

例： http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

edit：anglejsドキュメントの 例 も機能していません。彼らは角度タッチモジュールさえ挿入しませんでした。

javascriptangularjsmobileangularjs-ng-click
23
strangfeld

Angulars ngTouchモジュールはng-clickディレクティブの300ms遅延のみを削除しているため、角度と完全に調和する fastclick.js を使用しています。

スクリプトがロードされる前、DOMの準備ができる前にFastclickライブラリをアタッチしたため、最初はうまくいきませんでした。私はこれを修正するために、関数を run block of my angular app。この関数はDOMの準備ができた後にコードを実行します。

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

この方法は、angularjs youtubeチャンネルの latest screencast で提案されています。

56
strangfeld
   // 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();
            }
          });
        }
      };
    });
0
matias ezequiel marani

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コードをロードする必要はありません。

0
Luke Knepper