почему слушатель событий отработывает сразу, а не по клику?

Question

почему слушатель отработает сразу, а не при следующем нажатии

const headerLang = document.querySelector('.header__lang');
  if (!headerLang) {
    return null;
  }

  headerLang.addEventListener('click', function() {
    headerLang.classList.toggle('header__lang--active');
    window.addEventListener('click', langListner, false);
  });

  function langListner(e) {
    console.log('test')
    if (!e.target.closest('.header__lang')) {
      headerLang.classList.remove('header__lang--active');
      window.removeEventListener('click', langListner, false);
    } else {
      headerLang.classList.remove('header__lang--active');
      window.removeEventListener('click', langListner, false);
    }
  }

Answer 1

Потому что параметер useCapture в документации выглядет так

Если равно true, useCapture указывает, что пользователь желает начать захват. После инициализации захвата все события указанного типа будут отправлены в зарегистрированный listener перед отправкой в какой-либо EventTarget под ним в дереве DOM. События, восходящие вверх по дереву, не будут вызывать слушателей, которым назначено использовать захват. Смотрите DOM Level 3 Events для более детального объяснения. Значение useCapture по умолчанию равно false.

const headerLang = document.querySelector('.header__lang');

headerLang.addEventListener('click', function() {
  headerLang.classList.toggle('header__lang--active');
  console.log('test starting');
  window.addEventListener('click', langListner, true);
  console.log('test started');
});

function langListner(e) {
  console.log('test')
  if (!e.target.closest('.header__lang')) {
    headerLang.classList.remove('header__lang--active');
    window.removeEventListener('click', langListner, false);
  } else {
    headerLang.classList.remove('header__lang--active');
    window.removeEventListener('click', langListner, false);
  }
}

<div class="header__lang">test</div>

поменяйте на true увидите разницу.

БЛОГ НА HUSL

почему слушатель событий отработывает сразу, а не по клику?

Ответы (1 шт):