Событие щелчка окна вызывается дважды

У меня есть событие клика на window. Также есть флажок и метка для флажка. Когда вы нажимаете на метку, дважды вызывается событие click window's, один раз для флажка и один раз для метки.

Я попытался добавить e.stopPropagation(); в прослушиватель событий, но это не помогло. Почему событие вызывается дважды и что я могу сделать, чтобы это исправить?

JSFiddle

var checkbox = document.getElementById('checkbox-id');

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

console.clear();
input {
  display: none;
}
label {
  background-color: orange;
  width: 100px;
  height: 100px;
  display: block;
}
input:checked label {
  background-color: green;
}
<input type="checkbox" name="checkbox" id="checkbox-id" />
<label for="checkbox-id"></label>


javascript checkbox css dom-events event-bubbling
person Jessica    schedule 01.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Событие бурлит. Чтобы остановить это, используйте метод stopPropagation():

var checkbox = document.getElementById('checkbox-id');

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

Дополнительные сведения о порядке событий и всплывающих окнах: http://www.quirksmode.org/js/events_order.html

person Ashwin Balamohan    schedule 01.11.2016
comment
Флажок никогда не устанавливается в этом ответе - person Jessica; 01.11.2016
comment
Ты прав. «Редактировать» предотвращает щелчок. Я отменяю редактирование. - person Ashwin Balamohan; 01.11.2016
comment
Это не работает, как я сказал в вопросе. Не могли бы вы проверить свой код, прежде чем публиковать его? - person Jessica; 02.11.2016