JavaScript — как закрыть элемент при клике за его областью

Admin JavaScript

Как закрыть область по клику за ней. Функция на чистом JavaScript.

Также есть статья, как сделать то же самое на jQuery.

JS код:

window.addEventListener('click', function (e) {
    if (!menu.contains(e.target) && !button.contains(e.target)) {
        // Ниже код, который нужно выполнить при срабатывании события.
        menu.classList.add('hide');
    }
});

Вместо класса добавляющего скрытие:

menu.classList.add('hide');

Можно применить стиль сокрытия:

menu.style.display = 'none';

Если нужно, чтобы меню вновь открывалось по кнопке, стоит поставить исключение на неё. В коде выше это было сделано этим !button.contains(e.target).

Метки:

English Query (запросы по теме на английском языке)

Click outside div and hide current div in vanila JavaScript

How to hide a div when the user clicks outside

Hide menu on click outside in pure JS

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"JavaScript — как закрыть элемент при клике за его областью"