ngClick using ngTouch fires twice

[coma]

ngTouch 1.2.1 on Safari iOS 7 fires a second time by tapping wherever on the screen:

http://jsfiddle.net/coma/2hWWa/embedded/result/

http://stackoverflow.com/questions/21708730/why-are-multiple-click-events-fired-when-using-ngtouch/21766071#21766071

[pre]

I am also having hard times with this issue.

[Arkkimaagi]

Any ideas what's causing this, and if there's a workaround that I could use?

[coma]

I think it's something related to the event propagation, this is my workaround:

http://jsfiddle.net/coma/2hWWa

[tuomaslahti]

I have a similar problem.

My app has a popup dialog with a button that closes it. When the dialog's button is on top of a text input element, clicking the button on touch screen devices not only closes the dialog, but also focuses the input.

[TomiHiltunen]

Same problem here using angular w/ angular-touch 1.2.9.

There is no other clickable elements in the tree to propagate to. The very same click event is fired twice in a row. This does not happen with the swipes. Also, the problem of firing ngClick events twice disappears when I remove ngTouch from the project.

[richardbrammer]

I am also having this problem in ngTouch 1.2.13,

Depending on the situation, this is more than an optical bug, but in my case leads to rather annoying usability problems:

For example I change a View with activated ngTouch and with ng-click on a touch device for to open a modal, which lays it self above the clicked element. Within this modal a clickable element is at the same place as the previously clicked element (now laying above), then it could occur that the second event is fired and the button in modal is clicked/fired.

This could lead to unwanted behaviour of the application.

[pre]

Hi Richard, this is exactly same same kind of problem we are facing.

[ernestoaparicio]

Reference jquery (before angular.js) to stop the event propagation and prevent the double fires.

[likesjx]

That doesn't sound like a fix. We do not use jQuery in our application. Is this string saying that this will not be addressed prior to 1.3?

[getvictor]

This issue is making ngClick unusable. How are people working around this? Debounce? Fallback to original ngClick?

I added ngTouch to get swipe functionality, and now I'm saddled with this issue.

[jayvan]

We've been running our own fork of ng-touch with the changes in #6995
Other than that, I've seen projects doing manual debouncing where clicks within ~200ms of each other are disregarded.

[jkingsbery]

I'm running into this issue too. @coma's workaround seems to have fixed it.

[visnup]

I believe this same issue is fixed in fastclick already: issue and fix.

[louiswilbrink]

just started using angular-material and ran into this issue since material includes aria.

[cstephe]

+1 using material as well having the same issue.

[msimr]

Hum, fastclick creates other issues.
As an example, ng-places-autocomplete stops working properly as soon as fastclick.js is added to the project.

[petebacondarwin]

I wonder if that is a bug that could be fixed in ng-places-autocomplete?

[msimr]

No doubt it can be fixed in ng-places-autocomplete.
But, if we find one issue there, we'll probably find the same thing in other ui libs.

[michaelyuen]

Just encountered this issue. Can confirm it is with ngTouch, as removing it caused the issue to disappear.

In my case, ng-click would eventually cause partials to be hidden and shown, with the input on the new partial that is in the same location as the ng-click triggering the keyboard.

Tried @NorikDavtian 's suggested fix as well as the code here (#11342) to no avail.

In my case, the fix came by adding $event.preventDefault() to the ng-click on the button where the event was originating.

[jirehstudios]

Same issue, but fixed with the solution provided by @michaelyuen

<a data-ng-click="goTo($event, 'route/path')">Link</a>

$scope.goTo = function ($event, route) {
    $event.preventDefault();
    $location.url(route);
};

[nathanredblur]

This bug was happening to me too. I try update ng-touch to 1.4.8, the last workaround but not works.
This was happen in a small dropdown window I fixed whit this.

scope.domFn = function($event, value) {
  // hack to fix bug with angular ngTouch
  if($event.type == "touchend") {return}
  someAwsomeStuff(value);
};

I hope this help someone.

[sinta]

@Narretz From where can i get the latest ngTouch library file with ngClickOverride fix?

[Narretz]

The change is in 1.5.0-rc.2. So it's not in any 1.4 branch. That's because it's not a bug fix, we simply decided to disable the ngClick.override directive. You should be able to use ngTouch .5 with 1.4 though