Question

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

＆＃13;

function handleClick() {
  alert("Hello!");
}

＆＃13;

.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background: red;
}

.button {
  position: absolute;
  height: 20%;
  width: 20%;
  background: green;
}

＆＃13;

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

＆＃13;

在此示例中，如何在用户点击绿框时阻止显示警报？

Answer 1

您需要在div onclick="event.stopPropagation()"

中使用

停止冒泡

bubbling事件直接从目标元素开始。通常它会向上移动到<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>

Answer 2

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

Answer 3

您可以将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>

Answer 4

我将事件处理程序分离出来＆＃34;＆＃34;出现在顶部：

88.5

（注意最后一个参数必须与创建事件时的＆＃34; useCapture＆＃34;值匹配。）

或在你的情况下：

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

或

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

Answer 5

您已在屏幕上添加（class =“container”）的div <div class="container"> <div class="button" onClick="handleClick()"> </div>功能。当你点击任何地方handleClick将运行。所以添加该函数的div具有 class =“button”

CompletionService<T> completion = new ExecutorCompletionService<>(new ExecutorService());

for(Callable callable : callableList) {
    completion.submit(callable);
}

// Do something else

while(true) {
    Future<T> future = completion.poll();

    // At this point, is there a way to find out which callable is returning this future?
}

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

5 个答案: