5

Angular TouchngTouchでは、タッチ リリース時にクリックが発生します。

タッチスタートでクリックを発生させる方法はありますか?

以下のfast-clickディレクティブは、タッチスクリーンで必要なことを実行しているように見えますが、マウス クリックでは機能しません。

myApp.directive('fastClick', ['$parse', function ($parse) {
    return function (scope, element, attr) {
      var fn = $parse(attr['fastClick']);
      var initX, initY, endX, endY;
      var elem = element;

      elem.bind('touchstart', function (event) {
          event.preventDefault();
          initX = endX = event.touches[0].clientX;
          initY = endY = event.touches[0].clientY;
          scope.$apply(function () { fn(scope, { $event: event }); });
      });
    };
  }
]);
4

2 に答える 2

14

clickイベントに追加touchstart-event.preventDefault()イベントが 2 回発生するのをキャンセルします。

elem.bind('touchstart click', function (event) {

私が 1 つのアプリで使用する簡単な fastclick コードは次のとおりです。

app.directive("ngMobileClick", [function () {
    return function (scope, elem, attrs) {
        elem.bind("touchstart click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            scope.$apply(attrs["ngMobileClick"]);
        });
    }
}])

そして次のように使用します：ng-mobile-click="myScopeFunction()"

于 2014-07-14T20:21:52.840 に答える
1

tymeJV の答えは正しいですが、ngClick ディレクティブを上書きしようとすると、動作が ngTouch モジュールと競合しました - 一部のクリックが 2 回起動し始めました。理由は簡単です。ngTouch は問題を気にしているのですが、残念ながらバグがあります。

次の代わりに touchstart イベントハンドラーで:

  var touches = event.touches && event.touches.length ? event.touches : [event];

次のようなものが必要です。

var touches = null;
  if (event.touches && event.touches.length) {
      //AC: this is original library case
      touches = event.touches;
  } else if (event.originalEvent && event.originalEvent.touches && event.originalEvent.touches.length) {
      //AC: this is fix actually working
      touches =  event.originalEvent.touches;
  }else{
    touches = [event];
  }

つまり、イベントの touches フィールドは何らかの理由で定義されていませんが、event.originalEvent.touches は問題ありません。

タッチエンドでも同じことを行う必要があります。

var touches = null;
  if (event.changedTouches && event.changedTouches.length) {
      //AC: this is original library case
      touches = event.changedTouches;
  } else if (event.originalEvent && event.originalEvent.changedTouches && event.originalEvent.changedTouches.length) {
      //AC: this is fix actually working
      touches = event.originalEvent.changedTouches;
  } else {
      touches = [event];
  }

ngTouch のバージョンは 1.2.27 です。

于 2014-12-31T14:25:36.510 に答える