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

Question

[kaidos]

Как сделать чтобы меню закрывалось при клике в любую область кроме самого меню?
Мой код:

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

Comments

[Антон Литвиненко]

для этого чаще всего делают так называемый оверлей, который открывается под меню на весь экран и часто притемняет все что под ним. но можно оставить и прозрачный. вот при клике на нем и закрывается меню

[Сергей delphinpro]

Я уже со счёта сбился, сколько раз это писал: гуглить по запросу javascript click outside

Answer 1

[maxonlinux]

let menuBtn = document.querySelector('.header__burger')
let menu = document.querySelector('.header__nav')
menuBtn.addEventListener('click', function(){
  menu.classList.toggle('menu__active')
  document.addEventListener('click', function closeMenu(e) {
    if (e.target != menu) {
      menu.classList.toggle('menu__active')
      document.removeEventListener('click', closeMenu)
   }
  })
})