解决这个问题的另一种方法是在子进程上设置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 ()

我有问题得到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;
    }
  }

DOM事件的顺序:捕获vs冒泡

事件的传播有两个阶段。这被称为“捕捉”和“冒泡”。

               | |                                   / \
---------------| |-----------------   ---------------| |-----------------
| element1     | |                |   | element1     | |                |
|   -----------| |-----------     |   |   -----------| |-----------     |
|   |element2  \ /          |     |   |   |element2  | |          |     |
|   -------------------------     |   |   -------------------------     |
|        Event CAPTURING          |   |        Event BUBBLING           |
-----------------------------------   -----------------------------------

捕获阶段首先发生，然后是冒泡阶段。当您使用常规DOM api注册一个事件时，默认情况下，事件将是冒泡阶段的一部分，但这可以在事件创建时指定

// CAPTURING event
button.addEventListener('click', handleClick, true)

// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)

在React中，冒泡事件也是默认使用的。

// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>

// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>

让我们来看看我们的handleClick回调(React):

function handleClick(e) {
  // This will prevent any synthetic events from firing after this one
  e.stopPropagation()
}

function handleClick(e) {
  // This will set e.defaultPrevented to true
  // (for all synthetic events firing after this one)
  e.preventDefault()  
}

一个我在这里没有看到的替代方案

如果你在所有的事件中调用e.preventDefault()，你可以检查一个事件是否已经被处理，并防止它再次被处理:

handleEvent(e) {
  if (e.defaultPrevented) return  // Exits here if event has been handled
  e.preventDefault()

  // Perform whatever you need to here.
}

关于合成事件和本机事件的区别，请参阅React文档:https://reactjs.org/docs/events.html

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

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

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

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

我也有同样的问题。我发现stopPropagation确实有用。我将把列表项拆分为一个单独的组件，如下所示:

class List extends React.Component {
  handleClick = e => {
    // do something
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        <ListItem onClick={this.handleClick}>Item</ListItem> 
      </ul>
    )
  }
}

class ListItem extends React.Component {
  handleClick = e => {
    e.stopPropagation();  //  <------ Here is the magic
    this.props.onClick();
  }

  render() {
    return (
      <li onClick={this.handleClick}>
        {this.props.children}
      </li>       
    )
  }
}