Почему не скрывается список?

Question

Подскажите пожалуйста почему не проходит проверку когда элемент имеет header__lang--active


export default () => {
  const headerLang = document.querySelector('.header__lang');
  if (!headerLang) {
    return null;
  }
  function closeOptions() {
    headerLang.classList.remove('header__lang--active');
    window.removeEventListener('click', langListner, true);
    console.log('remover');
  }
  function openOptions() {
    headerLang.classList.add('header__lang--active');
    window.addEventListener('click', langListner, true);
    console.log('listner');
  }
  function langListner(e) {
    if (!e.target.closest('.header__lang')) {
      closeOptions();
      console.log('test');
    } else {
      closeOptions();
    }
  }
  headerLang.addEventListener('click', () => {
    if (!headerLang.classList.contains('header__lang--active')) {
      console.log(headerLang.classList.contains('header__lang--active'));
      openOptions();
    } else {
      console.log('firstListner-false');
      closeOptions();
    }
  }, true);
};

Answer 1

В addEventListener на window третий параметр выставлен в значение true что перехватывает погружение события и таким образом сперва происходит клик по window, а потом уже по .header__lang. Соответственно функция langListner попадает в else и удаляет класс header__lang--active, после чего отрабатывает клик по .header__lang, который опять добавляет этот класс, так как попадает в if. Что бы это исправить нужно третий параметр выставить в false, но тогда класс header__lang--active не будет добавляться совсем, потому что теперь будет работать всплытие и клики отработают в обратном направлении. Что бы этого избежать в событии клика на .header__lang нужно запретить всплытие. Вот так:

headerLang.addEventListener('click', (e) => {
e.stopPropagation();
...

БЛОГ НА HUSL

Почему не скрывается список?

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