logo标签列表

如果另一个元素在顶部，防止onClick事件触发

javascripthtml
6

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

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>

在这个例子中，当用户点击绿色框时，我该如何防止警报框弹出？
具有可点击背景的div，但排除前景div的方法 - CInvt
5个回答
7

你需要在 div 中使用 onclick="event.stopPropagation()"。

停止冒泡

一个冒泡事件从目标元素向上传递。通常它一直向上到达<html>，然后到达document对象，有些事件甚至到达window，调用路径上的所有处理程序。

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

其方法是 event.stopPropagation()。

演示

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>

5

将事件传递到函数中，并检查其目标是否与元素本身相同。当您单击内部元素时，目标将是该元素。使用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>

1
你可以这样将e.target与e.currentTarget进行比较： 

function handleClick(e) {
  if (e.target == e.currentTarget) {
    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)">
  <div class="button"></div>
</div>

0

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

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

（注意，最后一个参数必须与您创建事件时的"useCapture"值匹配。）
或者在您的情况下：
document.getElementById('yourDiv').onclick = null;

或者

document.getElementById("yourDiv").removeAttribute("onClick");
0
你已经在覆盖整个屏幕的 (class="container") div 上添加了 handleClick 函数。 当你点击任何地方时，handleClick 函数将会运行。 因此，请将该函数添加到具有 class= "button" 的 div 中。
<div class="container">
  <div class="button" onClick="handleClick()">
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接