Let’s start with a simple requirement

When we customize a popup component, a common requirement is to close the popup layer by clicking on the blank area outside of the popup layer. You might say, this is not easy, use the event bubbling mechanism, add a listening event on the document to close the pop-up layer, and then prevent bubbling on the pop-up layer and click events on the call pop-up layer.

Correct position to prevent events from bubbling in React

Well, this would be possible in normal HTML pages, but in react projects you’ll find that you can’t prevent bubbles when you fire the click event in the target area because you can’t even find the event.stopPropagation() method. Later I read the article and learned:

  • Click events in the React component are delegated todocument, so it doesn’t make sense to prevent bubbling directly from the component’s click event. To illustrate this, look at the following example code:
class MyPomponent extends PureComponent {
  constructor(props){
    super(props)
  }
  componentDidMount() {
    document.addEventListener('click', (e) => {
      console.log(2);
    })
    document.body.addEventListener('click', (e) => { console.log(3); })}testClick(e) {
    console.log(1);
  }
  render() {
    return(<div onClick={(e) => this.testclick (e)}> Test component </div>)}} // prints 3, 1, and 2 in sequenceCopy the code
  • Since neither can directly prevent the target event from bubbling, usee.stopImmediatePropagation()Can the event, because it not only prevents the event from bubbling, but also prevents the default event. Actually, I can’t, because the toptestClicktheePrint it out and you’ll see there isn’t onestopImmediatePropagationThe method, of course, didn’t workstopPropagationMethod, which is later found by querying the data, these native methods are placed innativeEventProperty, so the code to prevent bubbling in the target event is:
/ / stop the bubbling stopBubble (event) {event. NativeEvent. StopImmediatePropagation () / / stop the bubbling}Copy the code

The last step

Ok, now that the target event has been prevented from bubbling, all that remains is to add a click event to the document and close our target element by calling state in the callback. The implementation code is as follows:

componentDidMount() {/ / click on the document. The input box is hidden elsewhere addEventListener ('click', (e) => {
      this.setState({
        showInput: false,})})}Copy the code

Of course, this only works in modern browsers, but if you want to be compatible with Internet Explorer, you can add browser compatibility with click events, so I won’t go into details here.

conclusion

React acts as an event proxy for click events, so it’s not quite the same as normal pages. This is something to be aware of. The above is a summary of a small hole in my daily development.

reference

  • Drill into the React event system (React click on the white space to hide the pop-up layer; React prevents event bubbling from failing.