解决这个问题的另一种方法是在子进程上设置onMouseEnter和onMouseLeave事件。(你的< li >标签) 当鼠标悬停在子进程上时，您可以设置一个特定的状态来停止父进程以执行onClick函数内容。 喜欢的东西:

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state.overLi = false
  }

  handleClick() {
    // do something
  }

  render() {
    return (
      <ul
        onClick={(e) => {
          if (!this.state.overLi) {
            console.log("parent")
            this.handleClick()
          }
        }}
      >
        <li
          onClick={(e) => {
            console.log("child")
            // prevent default? prevent propagation?
            this.handleClick()
          }}
          onMouseEnter={() =>
            this.setState({
              overLi: true,
            })
          }
          onMouseLeave={() =>
            this.setState({
              overLi: false,
            })}
        ></li>
      </ul>
    )
  }
}

我已经搜索了很多，没有设法实现任何解决方案为我的上下文使用e.s stoppropagation ()

可以通过检查事件目标来避免事件冒泡。 例如，如果你有输入嵌套到div元素，你有处理点击事件的处理器，你不想处理它，当输入被点击，你可以只传递事件。目标放入你的处理程序并检查处理程序是否应该基于目标的属性执行。 例如，你可以检查如果(目标。localName === "input") {return}。 因此，这是一种“避免”处理程序执行的方法

我有问题得到event.stopPropagation()工作。如果您也这样做，尝试将其移动到您的点击处理程序函数的顶部，这是我需要做的事情来阻止事件冒泡。示例函数:

  toggleFilter(e) {
    e.stopPropagation(); // If moved to the end of the function, will not work
    let target = e.target;
    let i = 10; // Sanity breaker

    while(true) {
      if (--i === 0) { return; }
      if (target.classList.contains("filter")) {
        target.classList.toggle("active");
        break;
      }
      target = target.parentNode;
    }
  }

新的方法更简单，会节省你一些时间!只需将事件传递给原始的单击处理程序并调用preventDefault();。

clickHandler(e){
    e.preventDefault();
    //Your functionality here
}

React在文档中使用事件委托和单个事件监听器来处理冒泡事件，比如本例中的'click'，这意味着停止传播是不可能的;当你在React中与它交互时，真实的事件已经传播了。在React的合成事件上stopPropagation是可能的，因为React在内部处理合成事件的传播。

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}

这是一种简单的方法，可以防止单击事件向前移动到下一个组件，然后调用你的yourFunction。

<Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button>