父子元素的独立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();
  ...
}