Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

stopImmediatePropagation is not available for synthetic events

See original GitHub issue

In order to call this method, you’d have to access it via event.nativeEvent.stopImmediatePropagation(): https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

It’d be awesome if this was supported on event itself. I did see a prior issue for this, but it was for a use case that sIP wasn’t required for.

For a specific use case: if you want to kill hover events for touch input, onTouchStart will trigger onMouseOver and stopImmediatePropagation cancels that internal cascade.

Issue Analytics

State:
Created 6 years ago
Reactions:20
Comments:15 (2 by maintainers)

Top GitHub Comments

16reactions

Mr-Walletcommented, May 7, 2020

I concur with the above. The documentation for SyntheticEvent states:

It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Not having stopImmediatePropagation on it violates the promise that the interface is the same.

13reactions

tamzinblakecommented, May 29, 2020

If this won’t be fixed, at least fix the docs to stop claiming that the interface is the same when it’s not.

Top Results From Across the Web

ReactJS SyntheticEvent stopPropagation() only works with ...

React Stop Propagation on jQuery Event. Use Event.stopImmediatePropagation to prevent your other (jQuery in this case) listeners on the root from being called....

Event.stopImmediatePropagation() - Web APIs | MDN

The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.

SyntheticEvent - React

This reference guide documents the SyntheticEvent wrapper that forms part of React's Event System. See the Handling Events guide to learn more.

Why isn't event.stopPropagation() working?!

Instead you can use event.nativeEvent.stopImmediatePropagation() to stop event propagation and prevent events being bubbled to parent component.

StopPropagation vs. StopImmediatePropagation in JavaScript

In the JavaScript event system, there are two event phases — bubbling and capturing. Image source: W3C. Not every DOM event is supportive...