AngularJS Click on TouchStart

Question

Angular Touch ngTouch causes the click to occur on touch release.

Is there a way to make the click happen on touch start?

The fast-click directive below seems to do what I want on touchscreens, but it doesn't work with mouse clicks.

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

tymeJV · Accepted Answer · 2014-07-14T20:49:19.303

14

Add click to the touchstart event - event.preventDefault() will cancel the event from happening twice:

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

A quick fastclick code that I use in one app is:

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

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

And use like: ng-mobile-click="myScopeFunction()"

edited Jul 14 '14 at 20:49

answered Jul 14 '14 at 20:21

tymeJV

103,943
14
161
157

@benshope -- I posted some fastclick/touchstart code I use in an app I support, should get the job done. – tymeJV Jul 14 '14 at 20:49
Shouldn't it be `scope.$apply(attrs["ng-mobile-click"]);` or am I wrong? – jstudios Jan 21 '16 at 20:39
@jstudios -- Those dashes get converted to a camel cased name. – tymeJV Jan 21 '16 at 20:40
@tymeJV So it does the opposite of what `app.directive("ngMobileClick"..` does? Where it adds the dashes at each capital letter? – jstudios Jan 21 '16 at 20:43
@jstudios -- Yes, the declared directive is converted – tymeJV Jan 21 '16 at 20:46
It's a trap! Just hacking in stopPropagation() might have unplanned consequences, like if you're trying to catch all taps at the level as well. – Jeremy Lawson Jan 22 '17 at 20:23

score 1 · Answer 2 · answered Dec 31 '14 at 14:25

The answer of tymeJV is correct but when I've tried to overwrite ngClick directive the behaviour conflicted with ngTouch module - some clicks started firing twice. The reason is simple, ngTouch cares about the stuff but unfortunately has a bug.

In touchstart event handler instead of:

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

it should have something like this:

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];
  }

i.e. event's touches field is undefined for some reason, but event.originalEvent.touches is fine.

The same should be done in 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];
  }

Version of ngTouch is 1.2.27.

AngularJS Click on TouchStart

2 Answers2