我有一个带有 onClick 处理程序的 div 以及带有 onClick 事件的按钮。如何防止按钮触发 div onclick？答案

【问题标题】：I have a div with a onClick handler and also buttons inside with onClick events. How do I prevent the buttons from firing the div onclick?我有一个带有 onClick 处理程序的 div 以及带有 onClick 事件的按钮。如何防止按钮触发 div onclick？
【发布时间】：2020-10-16 18:43:45
【问题描述】：

基本上，我有一个包含您团队成员的列表。每个成员都有一个单独的 div，要选择一个成员，请单击该 div。我在 div 上添加了一个单击事件处理程序，以便单击它选择该特定成员并突出显示它。我在每个成员的 div 内还有一个编辑按钮和一个删除按钮。然而，现在发生的事情是，当您想要编辑或删除团队成员时，它也会触发 div onClick。我知道这是预期的行为，但是我不确定如何在单击按钮时阻止 div onClick 触发，或者如何在不将按钮放入 div 的情况下实现相同的“外观”。

我想保持相同的外观（每个团队成员的一个部分，可以单击以选择团队成员）但我不介意更改 div 的结构。如果这很重要，我正在使用 React。

【问题讨论】：

事件冒泡javascript.info/bubbling-and-capturing

标签： javascript html css reactjs addeventlistener

【解决方案1】：

这是一个简单的示例，说明如何阻止点击冒泡到父级：

const Button = () => (
  <div
    onClick={() => {
      console.log("I won't trigger if you click the inside div");
    }}
  >
    <div
      onClick={event => {
        event.stopPropagation(); // <-- this stops the click going through to the parent div
        console.log('Thank you for clicking the inside div');
      }}
    >
      I'm Inside
    </div>
  </div>
);

【讨论】：

【解决方案2】：

将onClick改为：

    onClick = (event) => {
        //event.target includes the specific element which was clicked.
        if(event.target.id == '<YOUR-DIV-ID>'){
        //handler
        }
    }

【讨论】：