父子元素的獨立onClick事件

Question

我有這樣的 JSX 代碼：

<div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}>
  <div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} />
</div>

當我單擊parent級（在child級之外）時，它將運行clickOnParent ，當我單擊child級時，它當然會同時運行clickOnParent和clickOnChild 。
現在我只想觸發clickOnChild並在單擊child時忽略clickOnParent 。 我能怎么做？

Answer 1

使用Event.stopPropagation()

const clickOnChild = (event) => {
  event.stopPropagation();
  ...
}