Javascript 如果另一个元素位于顶部，则防止onClick触发

我有一个应用程序，当你点击背景时会发生一些事情，但是，如果你点击背景上的其他东西，我不希望它被激活。例如：

函数handleClick（）{
警惕（“你好！”）；
}

.container{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：红色；
}
.按钮{
位置：绝对位置；
身高：20%；
宽度：20%；
背景：绿色；
}

---

您可以将

e.target

与

e.currentTarget

进行如下比较：

功能手柄点击（e）{
如果（e.target==e.currentTarget）{
警惕（“你好！”）；
}
}

.container{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：红色；
}
.按钮{
位置：绝对位置；
身高：20%；
宽度：20%；
背景：绿色；
}

---

将事件传递给函数，并检查其目标是否与元素本身相同。单击内部元素时，目标将是该元素。使用

event.stopPropagation（）

防止事件冒泡到容器中

函数handleClick（事件、元素）{
if（event.target！=元素）{
event.stopPropagation（）；
返回；
}
警惕（“你好！”）；
}

.container{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：红色；
}
.按钮{
位置：绝对位置；
身高：20%；
宽度：20%；
背景：绿色；
}

---

您需要在div内部使用

onclick=“event.stopPropagation（）”

停止冒泡

事件直接从目标元素开始。通常情况下，它会向上移动到

，然后移动到

文档

对象，有些事件甚至会到达

窗口

，调用路径上的所有处理程序

但任何处理程序都可以确定事件已被完全处理并停止冒泡

它的方法是

演示

函数handleClick（）{
警惕（“你好！”）；
}

.container{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：红色；
}
.按钮{
位置：绝对位置；
身高：20%；
宽度：20%；
背景：绿色；
}

---

当“某物”出现在顶部时，我会分离事件处理程序：

element.removeEventListener("mousedown", handleMouseDown, true);

（注意，创建事件时，最后一个参数必须与“useCapture”值匹配。）

或者在您的情况下：

document.getElementById('yourDiv').onclick = null;

或

---

您已经在覆盖屏幕的div上添加了

handleClick

函数。 当您单击任意位置时，handleClick将运行。 因此，将该函数添加到具有class=“button”

document.getElementById("yourDiv").removeAttribute("onClick");

<div class="container">
  <div class="button" onClick="handleClick()">
</div>