0

Можете подсказать? Имеется блок, при нажатии на любое место кроме этого блока он должен пропадать. В 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, но в этом варианте бы не работала форма.

1 ответ 1

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>

2
  • Благодарю. Помогло
    – rg234
    Commented 20 мар. 2022 в 13:27
  • Я добавил еще вариант, с удалением ивента, чтобы он постоянно не висел Commented 20 мар. 2022 в 13:50

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.