子 div 上的 OnClick 不应触发特定子级的父 div 的 onClick 方法

Question

考虑以下 React 组件

export default function App() {
  return (
    <div className="App" onClick={() => console.log("on app div")}>
      <div className="first" onClick={() => console.log("first div")}>
        first
      </div>
      <div className="second" onClick={() => console.log("second div")}>
        second
      </div>
      <div className="third">third</div>
    </div>
  );

}

因此，单击子 div 将当前触发父 div 和子 div 的 onClick 方法。 但是对于第一个孩子，我只想触发孩子的 onClick 方法。 有没有办法做到这一点？

我试过给子 div 一个更高的 z-index 值，但它仍然触发两个 onClicks，这是我试过的 css

.App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}
.first,.second,.third {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.first {
  background: lightblue;
  position: absolute;
  z-index: 10;
}

.second {
  background: lightcoral;
  position: absolute;
  left: 200px;
}

.third {
  background: lawngreen;
  position: absolute;
  left: 100px;
}

任何人都可以告诉我尝试过的css或任何其他方法是否有问题以实现这一目标。

Answer 1

你应该使用 event.stopPropagation()

<div className="second" onClick={(event) =>
    event.stopPropagation()
    console.log("second div")
 }>
    second
</div>