4

I am building a mobile web app with Angular, and I'm trying to incorporate the ngTouch (angular-touch) module to speed up click events on mobile devices.

Here is the app without ngTouch: http://lukasolson.github.io/n-spade-cards/ng-click/

Here is the app with ngTouch: http://lukasolson.github.io/n-spade-cards/ng-touch/

I am testing on an iPhone 5 with Safari.

Without the ngTouch module, everything works fine, but there is that annoying 300ms click delay.

However, with the ngTouch module, every time I tap on the screen, the web app thinks that I am tapping twice, ruining the functionality of my app.

Am I including the ngTouch module incorrectly? Why are multiple click events firing?

Lukas
  • 9,765
  • 2
  • 37
  • 45

1 Answers1

12

Source: http://jsfiddle.net/coma/2hWWa/
Test it on your iPhone: http://jsfiddle.net/coma/2hWWa/embedded/result/

angular.module('app').directive('myclick', function() {

    return function(scope, element, attrs) {

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

            event.preventDefault();
            event.stopPropagation();

            scope.$apply(attrs['myclick']);
        });
    };
});

Now you can:

<a myclick="aFunction()">click it!</a>

And it won't "duplicate" the clicks since "stopPropagation" will prevent the click from happening, only the touchstart will fire.

Just test it and let me know if it's useful.

Btw, If you don't care about zooming then you can avoid the delay with:

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

I use to add this for "apps".

UPDATE

https://github.com/angular/angular.js/issues/6251

coma
  • 16,429
  • 4
  • 51
  • 76
  • Hmm... I actually looked into fastclick a little, but I'd really like to know if this is actually a bug with Angular or if I'm doing something wrong. Your answer provides an alternative, but doesn't show me what I'm doing wrong. – Lukas Feb 13 '14 at 23:29
  • Let me change the name to avoid the confusion with https://github.com/ftlabs/fastclick . And yes, I think it's a bug, and that's why I just opened a ticket for it https://github.com/angular/angular.js/issues/6251 – coma Feb 13 '14 at 23:36
  • @coma: the click event died when I used this technic. What can be the problem? – Ali Saberi May 17 '16 at 15:37
  • @AliSaberi, dunno, try crafting a codepen/jsfiddle to check it out – coma May 17 '16 at 15:39