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

Source: Internet
Author: User






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, prevent event collisions with e.stoppropagation (), which preventsbubbling, without problems.



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)
    }
    two(){
        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:



Http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events



Http://wiki.jikexueyuan.com/project/react/event-system.html



Https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation









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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.