Встречается на собеседованиях • сегодня

Как сделать чтобы dropdown закрывался при клике вне на любом месте страницы

Для закрытия dropdown при клике вне его области можно использовать обработчик события click на document, который проверяет, был ли клик вне элемента dropdown.

document.addEventListener('click', (event) => {
  const dropdown = document.querySelector('.dropdown');
  const isClickInside = dropdown.contains(event.target);
  
  if (!isClickInside) {
    dropdown.classList.remove('open');
  }
});

Нюансы:

Убедись, что dropdown не закрывается при клике на его элементы (например, кнопку-триггер).
Если dropdown вложен в другой элемент, проверь всплытие событий.
Для динамически созданных dropdown используй делегирование событий.

Альтернатива с React:

jsx

useEffect(() => {
  const handleClickOutside = (e) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
      setIsOpen(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы