如何防止内部 div 的事件处理程序在外​​部 div 的事件处理程序中执行？

Question

I have two <div> s, one inside the other, each has their own click handler, and i want the outer div's click handler to trigger first when user clicks. And inside the outer div's click handler, I want to conditionally check if I want to block the inner div's click handler from executing is that possible?

for example in react:

<div class="outer" onclick={outerHandler}>

<div class="inner onclick={innerHandler}>

Click Me!

<div>

</div>

const outerHandler = () => { console.log("alert outer"); if (something != something) { //block inner handler from executing}}

const innerHandler = () => {console.log("alert inner")};

Answer 1

In the outer handler, handle the event in the capturing phase, and then you can call stopPropagation on the event if you want to prevent it from propagating downward to the inner element:

<div class="outer" onClickCapture={outerHandler}>

(note the use of onClickCapture - this is essential, it indicates that the event is handled in the capturing phase, not the bubbling phase)

And then, in outerHandler :

const outerHandler = (e) => {
  const stopInnerClick = true; // put your desired logic here
  if (stopInnerClick) {
    e.stopPropagation();
  }
}

Also note that onClick is case-sensitive ( onclick= won't work), and you need a " to terminate the inner class )

Live snippet:

 const outerHandler = (e) => { const stopInnerClick = true; // put your desired logic here if (stopInnerClick) { console.log('Propagation stopped'); e.stopPropagation(); } }; const innerHandler = () => { console.log('inner'); }; class Comp extends React.Component { render() { return ( <div class="outer" onClickCapture={outerHandler}>outer <div class="inner" onClick={innerHandler}>inner </div> </div> ); } } ReactDOM.render( <Comp />, document.body );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

In React, you could change the state based on whatever condition you want, and then check the value in your handler.

const state = {
    blockInner: false
}

const outerHandler = () => { 
    console.log("alert outer"); 
    if (something !== something) {
        this.setState({ blockInner: true });
    }
}

const innerHandler = () => {
    if (!this.state.blockInner) {
        console.log("alert inner");
    }
}