Categories
JavaScript Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *