Why are multiple click events fired when using ngTouch?

Question

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?

Answer 1

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