gpt4 book ai didi

javascript - 捕获父容器而不是子容器的点击事件

转载 作者:太空宇宙 更新时间:2023-11-04 13:59:36 25 4
gpt4 key购买 nike

用下面的例子:

enter image description here

HTML:

<div class="parent" onclick="alert('hello!')">
<div class="child"></div>
</div>

CSS:

.parent {
align-items: center;
background: blue;
display: flex;
justify-content: center;
}

.child {
background: pink;
height: 100px;
width: 200px;
}

我希望当用户点击父/蓝色部分时触发 onclick 事件。但是当用户点击子/粉红色部分时不会。现在,即使单击粉红色,事件也会触发,这当然很明显,因为 .child 是父级的子级。有什么办法可以克服这个问题吗?

最佳答案

使用event.stopPropagation()事件冒泡到 DOM 树的方法。

.parent {
align-items: center;
background: blue;
display: flex;
justify-content: center;
}
.child {
background: pink;
height: 100px;
width: 200px;
}
<div class="parent" onclick="alert('hello!')">
<div class="child" onclick="event.stopPropagation()"></div>
</div>

关于javascript - 捕获父容器而不是子容器的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42022540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com