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

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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