Why are several click events triggered when using ngTouch?

Question

I am creating a mobile web application with Angular and I am trying to enable ngTouch (angular - touch) to speed clicks on mobile devices.

Here is an application without ngTouch: http://lukasolson.imtqy.com/n-spade-cards/ng-click/

Here is the application with ngTouch: http://lukasolson.imtqy.com/n-spade-cards/ng-touch/

I am testing iPhone 5 using Safari.

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

However, with the ngTouch module, every time I click on the screen, the web application thinks I tap twice, disrupting the functionality of my application.

Did I turn on the ngTouch module incorrectly? Why are multiple click events triggered?

Answer 1

Source: http://jsfiddle.net/coma/2hWWa/
Check it out 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 this will not "duplicate" clicks. Since then, "stopPropagation" will prevent a click from occurring, only touchstart will fire.

Just check this out and let me know if this is helpful.

Btw, If you don't care about scaling, you can avoid the delay by:

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

I use to add this for "applications".

UPDATE

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