Ionic2 - Gesture how to use tap and press event on one element

Ionic Framework ionic-v3
1

home.html

<div (tap)="itemTapped($event)" (press)="itemPressed($event)" style="width: 200px; height: 100px; background: gray">tap or press me</div>

home.ts

    itemTapped(e) {
        console.log("itemTapped");
        alert("itemTapped");
    }

    itemPressed(e) {
        console.log("itemPressed");
        alert("itemPressed");
    }

I click the element of div, alert(“itemTapped”); will run , and (press) event will trigger after close the pop alert
but if you close alert quickly enough, press event will not be triggered.
or if commit alert(“itemTapped”); press event will not be triggered.

now, i want to click the item to push a detail page, and don’t triger press event

2

there is a way to do that

change home.html to

    <div (press)="itemPressed($event)">
        <div style="width: 200px; height: 100px; background: gray"(tap)="itemTapped($event)">tap or press me</div>
    </div>
1 Like
3

i resolve it in my app

<ion-item *ngFor="let novel of novels; let i=index" (tap)="readNovel($event, novel)" (press)="pressEvent($event, novel)"

move push page action to setTimeout

readNovel(env, novel) {
    // use setTimeout to prevent press event
    setTimeout(() => {
        this.navCtrl.push(NovelDetailPage, {
            novel: novel
        });
    }, 0);
}

but i don’t know the reason