Using (tap) and (press) on same element - both gesture events are fired

Ionic Framework ionic-v3
1

Hey Folks,

I’m having a strange issue with tap and press gestures.

<ion-item (tap)="itemTapped()" (press)="itemPressed()">
...
</ion-item>

In this scenario, from time to time (not always), both events will fire, even though tap and press are supposed to be mutually exclusive gestures — I’d obviously prefer them to be exclusive so that I don’t have two completely different user interactions firing off at the same time from the same user input.

Not only this, but sometimes a definitive (very brief) tap will cause a press event to fire instead.

This seems to occur more on older, slower, Android devices, but it could just be my imagination.

What am I doing wrong? Thanks!

2 Likes
2

I recently struggled with the (tap), (press) and (click) events and changed all my (tap) events into (click) since things were firing twice. Dit you tried calling

e.preventDefault();

after the event handler to prevent the events from falling down?

There is also a tutorial to create a custom directive from the time gestures weren’t supported by default in Ionic 2: http://www.roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/ and perhaps you can find some background information in this thread: Using Gestures Hold, Double Tap, and more in the Ionic 2 Beta.

1 Like
3

Thanks. I have read those articles, though I gather tap and press are still supposed to work together without ever touching the $event object. I’ve tried several variations of event.preventDefault() and event.stopPropagation().

Sadly, the problem persists.

   itemTapped(event: Event) {
     try {
       event.preventDefault();
       event.stopPropagation();
     }
     catch (e) {
     }
   }
1 Like
4

I solved this issue by changing the (tap) and (press) order.

<ion-item  (press)="itemPressed()" (tap)="itemTapped()">
...
</ion-item>

Not sure the reason, but this works for me!

3 Likes
5

Got “event.stopPropagation is not a function” when trying to fire stopPropagation on (tap).

<button ion-button (tap)="deletePrivateDiscussion(discussionItem); $event.stopPropagation()" color="danger" small [hidden]="hideDeleteButtons">

Anyone has any idea ? Thanks !

6

thanks for your suggestion, this works for me!

7

Nice suggestion, this works for me!

8

Changing press/tap order didn’t work for me.

UPDATE: I must correct myself. It looks like it is working now. Have to check on iOS/Android still.

10

can anyone tell how can i increase and decrease tap value for individual product.
here is my code.
<ion-item *ngFor=“let item of product; let i = index”>



{{ item.product_name}}



{{ item.product_desc}}

    <button  item-end ion-button small (tap)="tapEventsub(i)">-</button>
    <p item-end> {{tap}} </p>
    <button  item-end ion-button small (tap)="tapEventadd(i)">+</button>

    <button ion-button  item-end small round>Add</button>
  </ion-item>

and .ts file

tapEventadd(index:number) {
this.tap++;
}

tapEventsub(index:number) {
if(this.tap>0)
{this.tap–;}
}

it increase tap value for all the item

11

The tap and press events aren’t the same object that other PointerEvents use and, as you pointed out, don’t include the stopPropagation() method. The click event still occurs after a press or a tap, so I found that I could stop propagation on that to keep from clicking on the parent object:

<button ion-button 
    (tap)="deletePrivateDiscussion(discussionItem)" 
    (click)="$event.stopPropagation()" 
    color="danger" small [hidden]="hideDeleteButtons">
12

Thank you it works for me like a charm!!!:grinning: