我有一个应用程序，当您单击背景时会发生一些事情，但是，如果您单击背景顶部的其他内容，我不希望它激活。例如：
function handleClick() {
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick()">
<div class="button"></div>
</div>在此示例中，如何防止用户单击绿色框时显示警报？
您需要使用内部 divonclick="event.stopPropagation()"
停止冒泡
冒泡事件从目标元素直接向上发生。通常它会向上直到<html>，然后到达document对象，有些事件甚至到达window，调用路径上的所有处理程序。
但是任何处理程序都可以确定该事件已完全处理并停止冒泡。
演示版
function handleClick() {
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick()">
<div onclick="event.stopPropagation()" class="button"></div>
</div>将事件传递给函数，并检查其目标是否与元素本身相同。当您单击内部元素时，目标将是该元素。用于event.stopPropagation()防止事件冒泡到容器中。
function handleClick(event, element) {
if (event.target != element) {
event.stopPropagation();
return;
}
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick(event, this)">
<div class="button"></div>
</div>| 归档时间： |
|
| 查看次数： |
8663 次 |
| 最近记录： |