JS Как скрыть модальное окно при нажатий на родительский элемент

Question

body {
margin: 0;
overflow: hidden;
}
.modal {
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  position: fixed;
}
.modal-block {
  width: 80%;
  height: 70vh;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="modal">
  <div class="modal-block"></div>
</div>

т.е когда я нажимаю на .modal надо скрыть все модальное окно, а при нажатий на дочерний элемент .modal-block ничего не делать.
Я пробовал накладывать событие клик на родителя и скрыть, но куда бы я не нажал, он все равно скрывает весь блок.

Answer 1

// получаем элемент при клике на который нужно что-то сделать
let elem = document.querySelector(selector)
// вешаем на него событие
elem.addEvenListener('click', e => {
    // проверяем чтобы клик был именно по этому элементу, а не по дочерним
    if (e.target == elem) {
        // делаем что-то
    }
})

БЛОГ НА HUSL

JS Как скрыть модальное окно при нажатий на родительский элемент

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