AngularJS单击TouchStart

时间:2014-07-14 20:16:30

标签: angularjs angularjs-ng-touch

角度触摸ngTouch会导致触摸释放时发生点击。

有没有办法在触摸开始时进行点击?

下面的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 }); });
      });
    };
  }
]);

2 个答案:

答案 0 :(得分:14)

click添加到touchstart事件 - event.preventDefault()将取消事件发生两次:

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

我在一个应用中使用的快速快速代码是:

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()"

答案 1 :(得分:1)

tymeJV的答案是正确的,但是当我试图覆盖ngClick指令时,行为与ngTouch模块冲突 - 一些点击开始触发两次。原因很简单,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];
  }

即。 event的touches字段由于某种原因未定义,但event.originalEvent.touches没问题。

同样应该在touchend中完成:

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。