父元素和子元素的单独 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会运行。现在我只想在精确单击 时触发并忽略。我能怎么做？clickOnParentclickOnChild
clickOnChildclickOnParentchild

Answer 1

使用Event.stopPropagation()

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