Ionic-framework: $event.stopPropagation() dosen't work in tap event ( Ionic 2.0.0 ~ 3.7.0 )

[JowayYoung]

Version
[ ] 2.0.0~3.7.0

Type
[ ] bug

Platform
[ ] Mobile , Android , iOS

Current Behavior
[ ] I create a div tag and add a tap event without it , and then create a button tag under this div and add a tap event without it . Triggering events on the button also triggers events on the div , but $event.stopPropagation() doesn't work ( In the tap event ) .

Expected Behavior
[ ] $event.stopPropagation() will be work, and the div event dosen't trigger when triggering the button event .

Related Code
[ ] html

<div class="father" (tap)="hello()">
    <p>Hello</p>
    <button class="children" (tap)="say($event)">Say</button>
</div>

[ ] ts

export class FatherChildrenComponent {
    hello(): void {
        alert("hello, my children");
    }
    say(e: any): void {
        e.stopPropagation();  //$event.stopPropagation() dosen't work
        alert("father , I love you");
    }
}

Error Info

MapPage.html:81 ERROR TypeError: e.stopPropagation is not a function
    at MapPage.webpackJsonp.104.MapPage.unSelectedModule (map.ts:68)
    at Object.eval [as handleEvent] (MapPage.html:81)
    at handleEvent (core.es5.js:11914)
    at callWithDebugContext (core.es5.js:13206)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:12794)
    at dispatchEvent (core.es5.js:8814)
    at core.es5.js:9406
    at platform-browser.es5.js:2687
    at platform-browser.es5.js:3220
    at t.invoke (polyfills.js:3)

Other Info
[ ] If you use Angular2 alone , $event.stopPropagation() will be work .

[jgw96]

Thanks for opening an issue with us, we will look into this.

[JowayYoung]

The Ionic Team hasn't solved this bug yet , but you can use the click event instead of the tap event .

[keatkeat87]

maybe it cause by hammerjs ?
https://github.com/josdejong/propagating-hammerjs

[jsanta]

Hi. Did you try assigning the Event type in tour tap function? I mean using Event or TouchEvent instead of any.

[IvanLencina]

@JowayYoung I was using the click method, but on IOS sometimes it doesn't work. (tap) works on IOS and Android but we are not able to use stopPropagation() :/

Any solution?

[lthoye]

I'm having the same issue.

Using the click event instead of the tap event is not an option for me because I have a press event on the tappable child element. So, while I can stop the child click event from propagating to the parent click event, I can't trigger the press event without also triggering the click event on the same element.

Also, the tap events trigger in the wrong order, the parent tap event triggers first, then the child elements tap event gets triggered. It should be the other way around.

Any idea when this is going to be fixed?

[chandanch]

I got the following error when using tap event for cards

<ion-card (tap)="viewResults($event)">
   <ion-card-content>View Results</ion-card-content>
<ion-card>

....
viewResults(event: Event) {
   this.showResults = !this.showResults;
   event.stopPropogation();
}

[smxdevst]

@chandanch, you have typo. event.stopPropogation(); it should be event.stopPropagation()

[chandanch]

@smxdevst thanks i corrected it now.

[ostno]

The $eventobject given by (press)="press($event)" is the following :

angle : 0 center : {x: 458, y: 169} changedPointers : [PointerEvent] deltaTime : 0 deltaX : 0 deltaY : 0 direction : 1 distance : 0 eventType : 1 isFinal : false isFirst : true maxPointers : 1 offsetDirection : 1 overallVelocity : 0 overallVelocityX : 0 overallVelocityY : 0 pointerType : "mouse" pointers : [] preventDefault : ƒ () rotation : 0 scale : 1 srcEvent : PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5, …} target : div.tno_cal_daytitle timeStamp : 1530966275195 type : "press" velocity : 0 velocityX : 0 velocityY : 0

And there is no stopPropagation method in it. If someone found a workaround ?

[agrinko]

It's quite an important thing to fix, and it's being opened for over a year!
I have a tappable menu inside of a tappable component and I need to stop event propagation.

The one workaround I found now is to check for the event target from the outer component handler.
I added a custom attribute data-stop-propagation to the inner tappable menu, and in the outer handler (which should not be called if propagation was stopped) I check if it's prevented:

handleTap($event) {
  if (utils.isEventStopped($event))
    return;
  // else handle the event...
}

And the code for utils' method:

  isEventStopped(event: Event) {
    return event && (<HTMLElement>event.target).matches('[data-stop-propagation], [data-stop-propagation] *');
  }

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/230