stopPropagation is not stopping events from bubble up

[adamchenwei]

I have a child element using onTap and a parent element using onTap as well. But seems the stopPropagation for both is not seems stopping the event from firing, both function has the stopPropagation are firing regardless... any fix or clue?

[jordan-burnett]

Same issue, though rather 'stopPropagation' isn't exposed in the event object, so I have no option for nested handlers at all.

[adamchenwei]

@jordan-burnett I had to switch the top level to hammer as well, totally not a good solution but works for now

[jjmax75]

Found this - https://gist.github.com/jtangelder/361052976f044200ea17 at HammerJS site- http://hammerjs.github.io/tips/

[jjmax75]

I've found a solution that works for me, might be helpful to others I believe the reason that stopPropogation is unavailable is that you call this on a child element so an event on that child doesn't bubble up the DOM tree. Hammer wraps the components so is the parent in the DOM. That's just my understanding, feedback would be welcome. My fix is to add a panned state to the parent component and then set this to true when hammer registers a pan, and false on mount and tap/press. This state is then passed down to the children elements that I want to prevent from receiving the click event. So:

onClick = { !this.props.panned ? props.unitClickHandler : null }

also, please check this post on SO - https://stackoverflow.com/a/25063214

[booherbg]

For anyone who finds this later, I was able to get around this by using event.stopImmediatePropagation(). I experience no side effects, although YMMV.