javascript - 子 div 上的 OnClick 不应触发特定子级的父 div 的 onClick 方法
问题描述
考虑以下 React 组件
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>
);
}
因此,单击子 div 当前将触发父 div 和子 div 的 onClick 方法。但是对于第一个孩子,我希望只触发孩子 onClick 方法。有没有办法做到这一点?
我试过给子 div 一个更高的 z-index 值,但它仍然触发两个 onClicks,这是我尝试过的 css
.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;
}
任何人都可以告诉我尝试过的css或任何其他方法是否有问题以实现这一目标。
解决方案
你应该使用 event.stopPropagation()
<div className="second" onClick={(event) =>
event.stopPropagation()
console.log("second div")
}>
second
</div>
推荐阅读
- python - PANDAS - 当它适用于一个系列时,日期显示错误 NaN 而不是日期,但不适用于另一个系列。两者都有完全相同的方法
- azure - Powerapps 的 ALM
- javascript - 地理位置 MongoDB 查询 maxDistance
- variables - 如何在 terraform 中为 s3 后端声明变量?
- java - 如何将 Proto 对象序列化/反序列化到 Android 项目中的本地存储?
- dask - 来自库的 Dask 循环开销
- c# - 无法使用 IXmlSerializable.ReadXml 反序列化自定义字典
- c# - 如何在主文件夹中使用用户的用户 ID 创建子文件夹?
- hl7-fhir - _RevInclude in hl7.fhir
- flutter - 扑医生错误。Git 不在你的路径中