Question

我在window上有一个点击事件。复选框还有一个复选框和一个标签。当您点击标签时，window's点击事件会被调用两次，一次用于复选框，一次用于标签。

我尝试将e.stopPropagation();添加到事件监听器，但它没有帮助。为什么事件被调用两次，我该怎么做才能解决它？

JSFiddle

＆＃13;

var checkbox = document.getElementById('checkbox-id');

window.addEventListener('click', function(e) {
  console.log(checkbox.checked, e.target)
});

console.clear();

＆＃13;

input {
  display: none;
}
label {
  background-color: orange;
  width: 100px;
  height: 100px;
  display: block;
}
input:checked label {
  background-color: green;
}

＆＃13;

<input type="checkbox" name="checkbox" id="checkbox-id" />
<label for="checkbox-id"></label>

＆＃13;

Answer 1

事件起泡。要停止它，请使用stopPropagation()方法：

var checkbox = document.getElementById（＆＃39; checkbox-id＆＃39;）;

window.addEventListener('click', function(e) {
  console.log(checkbox.checked, e.target)
  e.stopPropagation();
});

有关事件顺序和冒泡的更多详细信息：http://www.quirksmode.org/js/events_order.html

窗口点击事件被调用两次

JSFiddle

1 个答案: