Как при клике на элемент обойти его вложенные элементы

Question

Можете подсказать? Имеется блок, при нажатии на любое место кроме этого блока он должен пропадать. В JS все прописал, все работает но проблема в том, что при клике на сам блок, клик засчитывается его вложенным элементами, тем самым ничего не работает. Как решить эту проблему? Получить все элементы с блока не очень хороший вариант, так как их там слишком много.

function creditHide(){
    document.addEventListener('click', function(event) {
        let activeCard = document.querySelector(".client__card__information")
        if(event.target !== activeCard){
            console.log(1)
        }
        
    })
}
creditHide()

Так же думал обернуть его какой нибудь ссылкой и задать ей z-index, но в этом варианте бы не работала форма.

Answer 1

openBtn.addEventListener('click', () => popup.style.display = 'block');
document.body.addEventListener('click', (event) => {
 if (event.target === event.currentTarget) {
  popup.style.display = '';
 }
});

#popup {
  display: none;
  padding: 2em;
  width: 50%;
  margin: 0 auto;
  background: burlywood;
  border: 2px solid blueviolet;
}

.inner {
  height: 2em;
  width: 100%;
  margin-bottom: 1em;
  background: aquamarine;
}

<button id="openBtn">open</button>
<div id="popup">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Более правильный вариант с удалением ивента

function closePopup(event) {
  if (!event.target.closest('#popup')) {
    popup.style.display = '';
    document.body.removeEventListener('click', closePopup);
  }
}

openBtn.addEventListener('click', (event) => {
  popup.style.display = 'block';
  event.stopPropagation();
  document.body.addEventListener('click', closePopup);
});

#popup {
  display: none;
  padding: 2em;
  width: 50%;
  margin: 0 auto;
  background: burlywood;
  border: 2px solid blueviolet;
}

.inner {
  height: 2em;
  width: 100%;
  margin-bottom: 1em;
  background: aquamarine;
}

<button id="openBtn">open</button>
<div id="popup">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

БЛОГ НА HUSL

Как при клике на элемент обойти его вложенные элементы

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