Javascript 单击子div不应触发父div'；针对特定子级的s onClick方法

考虑以下反应组件

export default function App() {
  return (
    <div className="App" onClick={() => console.log("on app div")}>
      <div className="first" onClick={() => console.log("first div")}>
        first
      </div>
      <div className="second" onClick={() => console.log("second div")}>
        second
      </div>
      <div className="third">third</div>
    </div>
  );

---

任何人都可以告诉我，我尝试的css或任何其他方法是否有任何错误，以实现这一点。

您应该使用event.stopPropagation（）

event.stopPropagation（）
控制台日志（“第二个div”）
}>
第二

e.preventdefault是您的frind here.Event.preventdefault（）和/或Event.stopPropagation（）在单击中可能有帮助functions@AtulRajput你能说一下我要在哪个div上添加e.preventDefaults吗？你不想让你的事件从哪个div冒泡到它的父元素，即你的子元素它起作用了，谢谢，你能告诉我我用z-index尝试的方法在这里是否有意义吗，也就是说，z-index不应该这样工作吗？z-index方法不正确，通过z-index，你只能管理两个兄弟元素的点击，但无论如何，事件冒泡都会发生，并且会转到父元素，所以如果你想实现这一点，z-index不会有帮助，只有给定的解决方案会有帮助。它可以为您工作，但可能会对样式产生副作用，根据文档e，StopperPaging（）是一种推荐的方法

.App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}
.first,.second,.third {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.first {
  background: lightblue;
  position: absolute;
  z-index: 10;
}

.second {
  background: lightcoral;
  position: absolute;
  left: 200px;
}

.third {
  background: lawngreen;
  position: absolute;
  left: 100px;
}

<div className="second" onClick={(event) =>
    event.stopPropagation()
    console.log("second div")
 }>
    second
</div>