Как закрыть модальное окно при нажатии только на блок с классом?

Question

Как закрыть модальное окно при нажатии только на блок с классом 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>

Answer 1

Можете просто смотреть на класс 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>

БЛОГ НА HUSL

Как закрыть модальное окно при нажатии только на блок с классом?

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