What is the method to prevent event bubbling in react?

Method: 1. Use "e.stopPropagation()" when there is no native event involved in registering only react events; 2. Use "e.nativeEvent.stopImmediatePropagation()" to prevent the outermost document from Events bubble up.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the method to prevent event bubbling in react

In react, there are two forms of preventing event bubbling:

1, e.stopPropagation() Used when there is no native event registration involved and only react events.

2, e.nativeEvent.stopImmediatePropagation() Use document.addEventListener to register the native event.

React's method of preventing bubbling events is mainly divided into the following two situations:

1. Prevent bubbling between synthetic events, method: e.stopPropagation( );

Event binding is as follows:

The writing method to prevent event bubbling is as follows:

2, Prevent the bubbling between synthetic events and events on the outermost document, method: e.nativeEvent.stopImmediatePropagation ();

Event binding writing method:

(1) No parameters are passed:

(2) Pass parameters:

##Writing to prevent event bubbling:

The reason for writing this is to add a click event to the document, as shown below:

Recommended learning: "react video tutorial"

The above is the detailed content of What is the method to prevent event bubbling in react?. For more information, please follow other related articles on the PHP Chinese website!