Sometimes, we want to fix React SyntheticEvent stopPropagation() only working with React events.

In this article, we’ll look at how to fix React SyntheticEvent stopPropagation() only working with React events.

How to fix React SyntheticEvent stopPropagation() only working with React events?

To fix React SyntheticEvent stopPropagation() only working with React events, we can use the ev.nativeEvent.stopImmediatePropagation method to stop native events propagation.

For instance, we write

ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();

in a event handler function in our React component to stop the propagation of React synthetic events and native events.

We use ev.stopPropagation(); to stop the propagation of React synthetic events.

And we use ev.nativeEvent.stopImmediatePropagation() to stop the propagation of native events.

Conclusion

To fix React SyntheticEvent stopPropagation() only working with React events, we can use the ev.nativeEvent.stopImmediatePropagation method to stop native events propagation.