您可以使用stopPropagation
stopPropagation-防止当前事件在冒泡阶段进一步传播
第一个

我在React中遇到了同样的问题，并使用下面的解决方案解决了它：

if(e.currentTarget != e.target ) return;
.......

另一个解决方案是将以下内容附加到父级上的事件回调：

if(event.target == event.currentTarget){
  event.stopPropagation()
  ....
}

通过这种方式，您可以拦截源自附加DOM节点的事件，并将不相关的事件中继到下一个节点。

我想在道具上调用函数，但同时又想阻止事件从子级传播到父级，下面是它的处理方式

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;

我觉得这个解决方案最干净。谢谢@JohnFash！

onClick={(event) => event.currentTarget == event.target && doSomething(event)}

以下是对此进行更详细解释的尝试：当鼠标进入父元素时，currentTarget被设置（事件），然后当它进入子元素时，目标发生变化。如果不进行检查，父元素的onClick会触发，因为mouseleave事件还没有触发。

老 问题 ， 但 有 麻烦 ， 然后 解决 了 它 自己 ， 我 只是 停止 了 ' 子 ' div 上 的 事件 一样 ， 所以 这 然后 通过 儿童 传递 下来 ， 所以 你 可以 在 你 想 让 这 停止 点击 事件 的 地方 ;

<div onClick={doThisClickEvent}> 
 <div onClick={(e) => e.stopPropagation()}>
  <div>
   <p>This now wont trigger click event</p>
  </div>
 </div>
</div>

中 的 每 一 个

我在使用Material-UI DataGrid时遇到了这个问题，并使用以下代码解决了这个问题：
event.defaultMuiPrevented = true;
例如：

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
/>