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