AltaiR-05
@AltaiR-05

Как правильно добавить событие после другого?

Привет всем. Мне нужно повесить обработчик клика `document` сразу после клика на кнопку. Делаю это так:

var btn = document.querySelector('button');

btn.addEventListener('click', function () {
  console.log('btn event');
  
  document.addEventListener('click', function () {
    console.log('document event');
  });
});


Но почему то при клике на кнопку происходит сразу и второе событие. Почему так? Прикрепляю ссылку на codepen
  • Вопрос задан
  • 90 просмотров
Решения вопроса 2
antoo
@antoo
Вам поможет event.stopImmediatePropagation():
https://codepen.io/anon/pen/NeqVjq?editors=1011
Ответ написан
@ivorobioff
Software Engineer
Это потому-что эффект бабла. Браузеры так устроены, что событие передается по иерархии вверх. В вашем случае, элемент document является родителем кнопки. Получается что вы при клике на кнопку подписываете документ на событие клика и так как событие клика по кнопки пойдет вверх то слушатель от документа также выполняется. Что-бы этого избежать надо сделать так:

var btn = document.querySelector('button');

btn.addEventListener('click', function (event) {
  
console.log('btn event');
  event.stopImmediatePropagation():
  
  document.addEventListener('click', function () {
    console.log('document event');
  });
});


но имейте введу что после этого при клике на эту кнопку слушатель от документа никогда не будет запускаться, то есть это не будет запускаться ` console.log('document event');`
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы