子 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>