如何防止內部 div 的事件處理程序在外​​部 div 的事件處理程序中執行？

Question

我有兩個<div> ，一個在另一個里面，每個都有自己的點擊處理程序，我希望在用戶點擊時首先觸發外部 div 的點擊處理程序。 在外部 div 的點擊處理程序中，我想有條件地檢查是否要阻止內部 div 的點擊處理程序執行，這可能嗎？

例如在反應中：

<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

在外部處理程序中，在捕獲階段處理事件，然后如果要防止它向下傳播到內部元素，則可以對該事件調用stopPropagation ：

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

（注意onClickCapture的使用——這是必不可少的，它表明事件是在捕獲階段處理的，而不是冒泡階段）

然后，在outerHandler ：

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

另請注意， onClick區分大小寫（ onclick=不起作用），您需要一個"來終止內部class ）

直播片段：

 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

在 React 中，您可以根據您想要的任何條件更改狀態，然后檢查處理程序中的值。

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");
    }
}