Как сделать чтоб клик роботал по всему блоку а не имено по одному классу?

Question

Есть разметка модального окна, и я хочу чтоб при клике за межами окна, и на крестик оно закрывалось, все работает , но есть проблема . В диве exit есть иконка, и когда настроить таргет на див с классом exit то будет работать клик только на див, а если я кликну на елемент что находится в диве с классом exit , то клик не будет работать, если какой то метод , в event что при клике так же брал все элементи что есть в том диве, а не только тот что задан?

<div class="wrap-pup hide">
      <div class="contact-menu d-flex">
         <div class="exit">
            <i class="fas fa-times"></i>
         </div>

         <div class="left-side">
            <h3 class="contact-menu__title">LET'S TALK!</h3>
            <h2 class="contact-menu__sup-title">CALL ME OR SEND ME A REQUEST</h2>
            <div class="contact-menu__contact-person">
               <div class="contact-menu__phone-text">
                  <i class="fas fa-phone"></i> +380986404004
               </div>
               <div class="contact-menu__email-text">
                  <i class="fas fa-envelope"></i> [email protected]
               </div>
            </div>
            <form action="POST">
               <label for="email">
                  Adress e-mail
               </label>
               <input class="contact-menu__email" type="email" name="email" id="email" placeholder="Adress e-mail">

               <label for="text">
                  Request
               </label>
               <textarea class="contact-menu__request" name="text" id="text"
                  placeholder="Type your request..."></textarea>

               <div class="contact-menu__wrap-btn">
                  <button class="contact-menu__send" type="submit">SEND</button>
               </div>

            </form>
         </div>
         <div class="rigth-side">
            <div class="contact-menu__wrap-img">
               <img class="contact-menu__img" src="img/request.png" alt="request">
            </div>
         </div>
      </div>
   </div>

function exit(e) {
   if (e.target.classList.contains('wrap-pup') || e.target.classList.contains('exit')) {
      pupMenu.classList.add('hide');
      contactMenu.classList.remove('show-pub');
   }
}

Answer 1

Не совсем понятно ваше решение через e.target.

Повесьте слушатель на элемент exit и тогда будет не важно чему равен target

const exitElement = document.querySelector('.exit')
        
exitElement.addEventListener('click',()=>{
    closeModal()
})

А вот для закрытия окна при клике по области, добавьте уже другой слушатель на контейнер модалки и вот там уже можете делать следующее сравнение

const modalContainer = document.querySelector('.modalContainer')

modalContainer.addEventListener('click',(event)=>{
    if(event.target === modalContainer) close()
})

БЛОГ НА HUSL

Как сделать чтоб клик роботал по всему блоку а не имено по одному классу?

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