Когда дело доходит до разработки удобных для пользователя веб-сайтов, одной из распространенных проблем является создание беспрепятственного взаимодействия пользователей с окнами меню. Возможность закрыть окно меню, щелкнув за его пределами, — очень востребованная функция, улучшающая взаимодействие с пользователем. В этой статье мы рассмотрим различные методы достижения этой интерактивной магии с помощью JavaScript. Итак, давайте углубимся и откроем секреты закрытия окна меню простым щелчком мыши снаружи!

Метод 1: делегирование событий
Один из способов закрытия окна меню — использование делегирования событий. При делегировании событий вы прикрепляете прослушиватель событий щелчка к документу или элементу контейнера, который обертывает окно меню. Когда происходит событие щелчка, вы можете проверить, находится ли целевой элемент в окне меню или в его контейнере. Если нет, вы можете запустить действие закрытия меню.

document.addEventListener('click', function(event) {
  const menuBox = document.getElementById('menu-box');
  const targetElement = event.target;

  if (!menuBox.contains(targetElement)) {
    // Close the menu box
  }
});

Метод 2: событие щелчка на объекте окна.
Другой метод предполагает прикрепление прослушивателя событий щелчка непосредственно к объекту окна. Этот подход позволяет вам захватывать все события щелчка и проверять, является ли целевой элемент окном меню или его контейнером. Если щелчок происходит за пределами окна меню, его можно закрыть.

window.addEventListener('click', function(event) {
  const menuBox = document.getElementById('menu-box');
  const targetElement = event.target;

  if (targetElement !== menuBox && !menuBox.contains(targetElement)) {
    // Close the menu box
  }
});

Метод 3: событие onBlur
Если вы работаете с полями ввода внутри окна меню, вы можете воспользоваться событием onBlur. Событие onBlur срабатывает, когда элемент теряет фокус. Прикрепив это событие к окну меню, вы можете обнаружить, когда пользователь щелкает за пределами меню или любого поля ввода внутри него. Этот метод особенно полезен, если вы хотите закрыть окно меню после того, как пользователь завершит с ним взаимодействие.

const menuBox = document.getElementById('menu-box');
menuBox.addEventListener('blur', function(event) {
  // Close the menu box
}, true);

Метод 4: CSS-решение с использованием флажков
Альтернативным методом, не требующим JavaScript, является CSS-решение с использованием флажков. Этот метод предполагает использование скрытого ввода флажка и использование псевдокласса :checked для переключения видимости окна меню. Поместив поле для ввода флажка за пределы окна меню и стилизовав его так, чтобы оно закрывало весь экран, щелчок в любом месте за пределами поля меню приведет к изменению состояния флажка и закрытию меню.

<input type="checkbox" id="menu-toggle">
<div id="menu-box">
  <!-- Menu contents here -->
</div>
<style>
#menu-toggle {
  display: none;
}
#menu-toggle:checked + #menu-box {
  display: none;
}
#menu-toggle:not(:checked) ~ .overlay {
  /* Style the overlay to cover the entire screen */
}
</style>

Закрытие окна меню щелчком за его пределами — ценная функция, повышающая удобство использования веб-сайта. Внедрив один из этих методов, вы можете обеспечить удобство взаимодействия с пользователем и повысить общую удовлетворенность. Независимо от того, выберете ли вы обработку событий на основе JavaScript или взлом флажков CSS, конечным результатом будет интерактивное окно меню, которое интуитивно реагирует на действия пользователя. Итак, вперед и откройте для себя волшебство закрытия окна меню одним щелчком мыши снаружи!