父元素和子元素分别触发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，现在我想要当准确地单击了child时，只触发 clickOnChild 并忽略clickOnParent。如何做？

- Danny

Answer 1

使用 Event.stopPropagation() 方法，可以阻止事件的进一步传播。

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

- wangdev87

---

请问如果我想传递一个值，比如被点击的元素的ID，应该怎么做呢？像这样 clickedOnChild(event, id)。 - Arinzehills