Как закрывать div при клике в свободную область вне этого блока?

Question

У меня простой код открытия/закрытия меню. Подскажите как можно сделать чтобы закрытие происходило еще и при клике вне меню?

let menuBtn = document.querySelector('.header__burger');
let menu = document.querySelector('.header__nav');
menuBtn.addEventListener('click', function(){
    menu.classList.toggle('menu__active');
});

Answer 1

Есть несколько вариантов, как можно реализовать скрытие меню по нажатию за ее пределы, разной степени костыльности:

При открытии меню, добавить в документ блок на весь экран, который будет перекрывать основной контент и закрывать меню по клику на этот блок.
Повесить слушатель клика на глобальный объект window, с колбэком, где будет провераться, содержится ли цель клика(event.target) в контейнере меню. Если не содержится, скрываем меню.

Первый вариант вроде не сложный, оставлю этот вариант без кода.

Реализация второго варианта:

const menuBtn = document.querySelector('.header__burger');
const menu = document.querySelector('.header__nav');

const hideMenu = (event) => {
  menu.classList.remove('menu__active');
}

const close = (event) => !menu.contains(event.target) && hideMenu(event);

menuBtn.addEventListener('click', (event) => {
  event.stopPropagation();
  menu.classList.toggle('menu__active');
});

window.addEventListener('click', close);

Наверняка есть еще варианты, но мне в голову пришли только эти два.

БЛОГ НА HUSL

Как закрывать div при клике в свободную область вне этого блока?

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