Question

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

我希望保持相同的外观（每个团队成员的一个部分，可以单击以选择一个团队成员），但是我不介意更改div的结构。如果重要的话，我正在React中工作。

Answer 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>
);

Answer 2

将onClick更改为：

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

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

2 个答案: