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
    20 мар 2022 в 13:27
  • Я добавил еще вариант, с удалением ивента, чтобы он постоянно не висел 20 мар 2022 в 13:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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