How does react stop the event from bubbling?

The main content of this article is "how to stop the event from bubbling". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to stop the event from bubbling" by react.

Method: 1, use "e.stopPropagation ()" when there is no native event registration only react event; 2, use "e.nativeEvent.stopImmediatePropagation ()" to prevent the event bubbling on the outermost document.

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

What is the way for react to prevent events from bubbling?

In react, there are two forms of preventing events from bubbling:

1. E.stopPropagation () is used when there is no native event registration but only react events.

2. E.nativeEvent.stopImmediatePropagation () is used after registering the native event with document.addEventListener.

There are two main ways for React to prevent bubbling events:

1. Prevent bubbling between composite events. Method: e.stopPropagation ()

The event binding is as follows:

The way to stop the event from bubbling is as follows:

2. Prevent bubbling between the composite event and the events on the outermost document by e.nativeEvent.stopImmediatePropagation ()

Event binding method:

(1) No parameters are passed:

(2) pass parameters:

How to stop the event from bubbling:

The reason for writing this is that a click event has been added to document, as shown below:

At this point, I believe you have a deeper understanding of "react how to stop the event from bubbling". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!