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


#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

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.


#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) {
     }
   }

#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!


#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">