Deep react Event System (react click on the blank section to hide the pop-up layer; React block event bubbling fails)

Only the students who are concerned with the problem in parentheses can jump directly to the Blue Word section. (the title is a bit big, in fact only one question is discussed)

Two events bound on the React component, after a conflict, using E.stoppropagation ()to prevent bubbling, can prevent the event conflict, no problem.

Today is a hole in the react event, the need can be simplified as follows: Clicking outside the frame body hides the frame. The most straightforward idea is to attach an event to the document, set the control to show that the hidden state is false, bind an event on the frame, and stop bubbling. This will not trigger the event on the document by clicking inside the frame body.

After writing, found a problem, can not stop bubbles, a search, good guy, many people ask e.stoppropagation () Why can't stop the event bubbling, but there are few reliable answers. My first thought was that there was a conflict between the native event and the React event. The apparent binding of native events was not in the spirit of react, but I decided to go on the path of truth.

For intuitive debugging, turn the requirements into, click the box Body Alert(1) Click the box outside alert(2).

Attach alert(2) to the documentand bind Alert(1) on the frame (the frame body is the React component, the same below). Do not do special treatment, click inside the box, according to the event bubble, first play 1 reload 2 . This is in line with expectations. e.stoppropagation () cannot prevent bubbling at this time.

The Stack Overflow e.nativeevent.stopimmediatepropagation () can be a perfect fit for your expectations.

The following entry into the exploration process, after consulting the information, the following conclusions are drawn:

1. React in order to improve efficiency, the event is entrusted to the document, so e.stoppropagation () is not to prevent bubbles, but when he stopped bubbling, the event has been passed to document, nothing to prevent. You canintuitively understand this by binding alert (3) on the document.body,3 is priority over 1 pop-up.
2. E.stoppropagation () No, the browser supports a good thing, e.stopimmediatepropagation () He not only prevents bubbling, but also blocks the triggering of other events on the current event trigger element. So you can't stop me even if you're bound to document.
3. This does not work, react the native event encapsulation, provides a lot of good things, but also omitted some features. E.stopimmediatepropagation () is the omitted part, however, he gives the opening: E.nativeevent , from the native event object found stopimmediatepropagation () , finish the job.

The test code is as follows:

Class Test extends react.component{    componentdidmount () {        document.onclick=this.two;    }    One (e) {        e.nativeevent.stopimmediatepropagation ();        Alert (1)    } (    ) {        alert (2)    }    render () {        return (<div style={{height:150,width:150, BackgroundColor: "#000"}} onclick={this.one}/>)    }}reactdom.render (    <test/>,    document.getElementById ("test"));

Thanks and not limited to:

Deep react Event System (react click on the blank section to hide the pop-up layer; React block event bubbling fails)