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

Question

我有两个<div>s，一个在另一个内部，每个都有自己的点击处理程序，我希望外部 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

在外层handler中，处理捕获阶段的事件，如果想阻止事件向下传播到内层元素，可以调用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）

直播sn-p：

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