0

Как закрыть модальное окно при нажатии только на блок с классом wrap, а при нажатии на блоки внутри ничего не делать.

document.querySelector('.wrap').addEventListener('click', (e) => {
     document.querySelector('.wrap').remove();
    });
.wrap{
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap>div{
color: white;
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="wrap"><div>text</div></div>

1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. Commented 10 июн. 2022 в 15:45

1 ответ 1

0

Можете просто смотреть на класс EventTarget-а:

const wrap = document.querySelector('.wrap');

wrap.addEventListener('click', (e) => {  
  if (e.target.className === 'wrap') {
    console.log('click on wrap');
  } else {
    console.log('click on inner');
  }
});
.wrap {
  background-color: blue;
}

.wrap .inner {
  width: fit-content;
  background-color: red;
}
<div class="wrap">
  <div class="inner">text</div>
</div>

Ваш ответ

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

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