JS: отслеживаем клик за пределами DOM элемента

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

Это очень распространённый сценарий, различные меню, списки и разные выпадашки ведут себя именно так.

Вот маленький javascript сниппет, который поможет вам решить эту задачу. Многие junior разработчики не знают как это сделать в пару строк, и придумывают для этого свои велосипеды.

Проверяем был ли клик на элементе

const dropDown = document.querySelector('.dropDown');

document.addEventListener('click', (e) => {
   const isOutsideClick = !dropDown.contains(e.target);
  
  if ( isOutsideClick ) {
    console.log('Клик за пределами элемента');
  } else {
    console.log('Клик по элементу');
  }
});