Ng-click fires twice in response to a single tap

ionic-v1
1

We have an “expand” action that, once clicked, adds a bunch of new elements to the DOM. This is a bit slow on mobile devices, and is resulting in the Ionic Tap system triggering 2 ng-click events.

I have uncommented line 2844 in ionic.js and here’s the console.log output:

tapClick touchend A (66,270)
tapClick mouseup A (66,270)

So what happens it that our expand action immediately collapses again and removes all the recently-added elements from the DOM.

If I add the data-tap-disabled=“true” attribute to the HTML tag, then the behavior disappears (but the 300ms delay is reintroduced).

2

As a workaround, I am recording the x & y coords of the tap event, and if the subsequent tap event matches both, then I ignore it.

3

Ionic’s tap system shouldn’t be fire click events twice, is there anyway you could replicate this is a codepen?

4

I have the same exact issue (touchend + mouseup ) for a single ng-click.
It happens only when the button is inside ‘ion-nav-buttons’ tag, when we put the button inside the ‘ion-content’ tag it doesn’t happen.
See codepen which is very similar to the actual code - the bug does not reproduce on the codepen:
http://codepen.io/OfirCohen/pen/RPxZYy

5

I have created a sample app to reproduce this and it happens both in native apk and in “ionic View” - can someone from ionic team look at this? i can share the app via “ionic view” and share the code. (“ionic view” app ID 282a253d)
It is reproduce on Android 4.4.2 and 5.x.x (also sometimes on iOS 8.3)

Thanks

6

Can you provide some code to look at. Can’t really see if there is an issue without a codepen to work off of

7

I created a codepen here: http://codepen.io/OfirCohen/pen/RPxZYy
But it is not reproduce on PC browser only on real device. So I copied the code to a sample app and uploaded it to ionicview (ID 282a253d) where you can see it happens (is the app ID what needed to share the app in ionicview or should I send it to a specific email?). How can I share the sample app code?

8

the codepen is coming up 404.

A codepen will be fine, as it should be a minimal example that reproduces the error.
Plus, we can create ionic projects with codepen so its very easy to transfer it to a device.

9

Sorry for that, for some reason the codepen was private. Here is a public one: http://codepen.io/OfirCohen/pen/ZGxYVg

10

Not sure what I should be looking for. Everything seems to work fine

11

As I wrote at the beginning of the post it is not reproduce on PC but on real device only (Android- always, iPhone-sometimes) please convert the code pen to ‘ionic view’ app, press on the filter button on the header and you will see the event is fired twice. Thanks.

12

Right, I’m not seeing that on my android device with the latest release. Is there any particular version of android you’re seeing this?

13

We see it on Android 4.4.2 and 5.x.x and iPhone 6 (8.4)

14

Hmm, I’ve got a similar issue to this also.
I’ve got a button that fires twice when its touched on device, once when clicked through ionic serve.
The function that is called takes up a bit of time to complete (it has a forEach in it and iterates through setting visibility for markers on a map).
If I comment out the forEach, and have just a $log there to show its been pressed, it only fires once.
It seems to only fire twice if the function called is slow to process.
I’m seeing it on android 4.4.2 on a Samsung s5
Tested on 5.0.0 on Nexus 5 and the issue isn’t there.

15

I too am having this issue as mentioned:

AND

The error is not produced in the browser and is clearly not related to the code itself:

http://play.ionic.io/app/2fc7300bf4a6

However testing in the emulator or on a real device this occurs.

I have Ionic version 1.6.4 installed.

1 Like
16

Update: The workaround of recording the coords and ignoring subsequent events is failing for us now on iOS 9.

Nov-06-2015-1:16:37PM::gaDiscussionPost >> – "Received tap event to toggle replies at (x/y): 182/205"
173Nov-06-2015-1:16:37PM::gaDiscussionPost >> – "Received tap event to toggle replies at (x/y): 183/205"

It looks like the X coord is changing by 1. I can update our workaround, but if anyone targets the root issue then that would be better to avoid future issues.

17

I am having a similar issue on IE11. with Ionic 1.1.1 and 1.2. When I put a breakpoint on the goBack function, I see that it consistently fires twice for some reason. IE10 works fine.
HTML
<ion-nav-buttons side="left"> <button nav-clear ng-click="goBack()" class="button icon-left ion-chevron-left button-clear"> Back </button> </ion-nav-buttons> <ion-nav-buttons side="secondary"> </ion-nav-buttons>

 Javascript

$scope.goBack = function () { //if history go back one, else go back to main if ($ionicHistory.backTitle()) { $ionicHistory.goBack(-1); } else { $state.go('app.main'); } };

18

My click events fire twice too on iOS simulator and devices. Did someone found a solution ? (ionic 1.2.1)

19

I’m also having my ng-click events firing twice! Can’t figure out how to fix it

1 Like
20

I am seeing the same issue.
I see buttons fired twice if the underlying method is taking a long time.

Strange thing is, it seems to be tied to the physical screen.
I have a goBack button that when clicked navigates to another view.
That view has a goBack button on exactly the same spot, and that button gets clicked after a slight delay.
So it seems the physical tap is registered twice, and the first time it calls a function on my first view and then the function on my second view.

Adding data-tap-disabled=“true” to the button helps.
But now I need to add it to all my buttons it seems.

4 Likes