javascript - 父元素和子元素的单独 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

标签： javascripthtmlcssreactjsdom

Answer 1

使用Event.stopPropagation()

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