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

Question

Почему по клику на текст внутри блока (Выберите город) не открывается подменю, а по клику на пустую область блока - открывается? Как это можно исправить?

let select = () => {
    let selectCurrent = document.querySelectorAll('.select__header'),
        selectItem = document.querySelectorAll('.select__item'),
        selectWrap = document.querySelector('.select');

    selectWrap.addEventListener('click', (e) => {
        e.currentTarget.classList.toggle('select--opened');
    })
    selectItem.forEach((item) => {
        item.addEventListener('click', (e) => {
            e.currentTarget.closest('.select').querySelector('.select__current').innerHTML = e.currentTarget.innerHTML;
            e.currentTarget.closest('.select').classList.remove('select--opened');
        });
    });

    window.onclick = function(event) {
        if (!event.target.matches('.select__header')) {

            let dropdowns = document.getElementsByClassName("select__body");
            for (let i = 0; i < dropdowns.length; i++) {
                let openDropdown = dropdowns[i];
                if (selectWrap.classList.contains('select--opened')) {
                    selectWrap.classList.remove('select--opened');
                }
            }
        }
    }
};

select();

.select {
  position: relative;
  z-index: 1;
}
.select--opened .select__body {
  display: block;
}
.select__header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(28, 36, 42, 0.2);
  background-color: #ffffff;
  padding: 12px 15px;
}
.select__current {
  font-family: "SourceSansPro-Bold", sans-serif;
  color: #858585;
  text-transform: uppercase;
  font-size: 13px;
}
.select__body {
  display: none;
  left: 0;
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: #ffffff;
  color: #000000;
  min-width: 100%;
  max-width: 100%;
  padding: 8px 0;
}
.select__item {
  cursor: pointer;
  padding: 10px 12px;
  line-height: 1;
  transition: 0.2s;
}

<div class="select">
    <div class="select__header"><span class="select__current">Выберите город</span></div>
    <div class="select__body">
        <div class="select__item">Киев</div>
        <div class="select__item">Одесса</div>
        <div class="select__item">Хмельницкий</div>
    </div>
</div>

Answer 1

Потому, что у Вас в обработчике проверяется элемент, по которому кликнули, на наличие определённого класса (.select__header):

window.onclick = function(event) {
  if (!event.target.matches('.select__header')) {
    ...
  }
}

Добавьте в CSS следующее:

.select__current { pointer-events: none; }

let select = () => {
  let selectCurrent = document.querySelectorAll('.select__header'),
    selectItem = document.querySelectorAll('.select__item'),
    selectWrap = document.querySelector('.select');

  selectWrap.addEventListener('click', (e) => {
    e.currentTarget.classList.toggle('select--opened');
  })
  selectItem.forEach((item) => {
    item.addEventListener('click', (e) => {
      e.currentTarget.closest('.select').querySelector('.select__current').innerHTML = e.currentTarget.innerHTML;
      e.currentTarget.closest('.select').classList.remove('select--opened');
    });
  });

  window.onclick = function(event) {
    if (!event.target.matches('.select__header')) {

      let dropdowns = document.getElementsByClassName("select__body");
      for (let i = 0; i < dropdowns.length; i++) {
        let openDropdown = dropdowns[i];
        if (selectWrap.classList.contains('select--opened')) {
          selectWrap.classList.remove('select--opened');
        }
      }
    }
  }
};

select();

.select {
  position: relative;
  z-index: 1;
}

.select--opened .select__body {
  display: block;
}

.select__header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(28, 36, 42, 0.2);
  background-color: #ffffff;
  padding: 12px 15px;
}

.select__current {
  font-family: "SourceSansPro-Bold", sans-serif;
  color: #858585;
  text-transform: uppercase;
  font-size: 13px;
  pointer-events: none;
}

.select__body {
  display: none;
  left: 0;
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: #ffffff;
  color: #000000;
  min-width: 100%;
  max-width: 100%;
  padding: 8px 0;
}

.select__item {
  cursor: pointer;
  padding: 10px 12px;
  line-height: 1;
  transition: 0.2s;
}

<div class="select">
  <div class="select__header"><span class="select__current">Выберите город</span></div>
  <div class="select__body">
    <div class="select__item">Киев</div>
    <div class="select__item">Одесса</div>
    <div class="select__item">Хмельницкий</div>
  </div>
</div>

БЛОГ НА HUSL

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

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