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 — как закрыть элемент при клике за его областью"