Клик вне элемента (блока)

Рассмотрим, как отловить клик вне элемента с помощью jQuery, а затем на чистом JavaScript. Это может понадобится, например, для всплывающих окон или для закрытия меню при клике за его пределами.

Клик вне элемента jQuery

Рассмотрим, как отловить клик за пределами блока

Пример: имеем блок, пусть это будет всплывающее окно .pop-up. Будем закрывать поп-ап при клике за его пределами:

<div class="pop-up">Поп-ап</div>

$(document).click(function (e) {
    if ($(e.target).closest(".pop-up").length) {
        // клик внутри элемента
        return;
    }
    // клик снаружи элемента
    $(".pop-up").fadeOut();
});

Закрытие меню при клике вне его, а также по нажатию на кнопку

Рассмотрим ситуацию, когда необходимо закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку.

Структура:

<button class="btn">Открыть меню</button>
    
<nav class="menu">
    <ul>
        <li><a>HTML</a></li>
        <li><a>CSS</a></li>
        <li><a>JavaScript</a></li>
    </ul>
</nav>

Будем закрывать меню, если клик совершён:

вне меню .menu
вне его дочерних элементов .menu *
по клику кнопки .btn

const menuBtn = $(".btn"),
      menu = $(".menu");

menuBtn.on("click", function () {
    if ($(this).hasClass("is-active")) {
        $(this).removeClass("is-active");
        menu.slideUp();
    } else {
        $(this).addClass("is-active");
        menu.slideDown();
    }
});

$(document).click(function (e) {
    if (!menuBtn.is(e.target) && !menu.is(e.target) && menu.has(e.target).length === 0) {
        menu.slideUp();
        menuBtn.removeClass("is-active");
    };
});

Клик вне элемента на чистом JavaScript

В данном примере мы скрываем блок при клике вне элемента с классом pop-up.

const popup = document.querySelector(".pop-up");

document.onclick = function (e) {
    if (e.target.className != "pop-up") {
        popup.style.display = "none";
    };
};

Закрытие меню при клике вне его — нативный JavaScript

Как во втором примере будем закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку. Но теперь уже на чистом JavaScript.

<button class="btn">Открыть меню</button>

<nav class="menu">
    <ul>
        <li><a href="#" target="_blank" rel="noopener noreferrer">HTML</a></li>
        <li><a href="#" target="_blank" rel="noopener noreferrer">CSS</a></li>
        <li><a href="#" target="_blank" rel="noopener noreferrer">JavaScript</a></li>
    </ul>
</nav>

.menu {
    visibility: hidden;
    opacity: 0;
}
.menu.open {
    transition: .2s visibility linear, .2s opacity linear;
    visibility: visible;
    opacity: 1;
}

const btnMenu = document.querySelector(".btn");
const menu = document.querySelector(".menu");
const toggleMenu = function () {
    menu.classList.toggle("open");
}

btnMenu.addEventListener("click", function (e) {
    e.stopPropagation();
    toggleMenu();
});

document.addEventListener("click", function (e) {
    const target = e.target;
    const its_menu = target == menu || menu.contains(target);
    const its_btnMenu = target == btnMenu;
    const menu_is_active = menu.classList.contains("open");

    if (!its_menu && !its_btnMenu && menu_is_active) {
        toggleMenu();
    }
});

Полезные ссылки:

Шпаргалка по использованию jQuery.
Коллекция нативных JavaScript методов.
Переход от jQuery на нативный JavaScript.

03/01/2022 01:43

admin

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

Герман
30/09/2020, 08:04
а как сделать выполнение функции вне блока по таймеру?
Олег
03/02/2021, 17:45
Подскажите, как сделать закрытие меню еще и по клику на элемент меню.

Рамиль

04/02/2021, 22:26


(function () {

    const body = document.body;
    const btnMenu = document.querySelector('.burger');
    const close = document.querySelector('.burger span');
    const menu = document.querySelector('.nav__list');
    const toggleMenu = function () {
      menu.classList.toggle('nav__list--active');
      close.classList.toggle('active');
      body.classList.toggle('over');
    }

    btnMenu.addEventListener('click', function (e) {
      e.stopPropagation();
      toggleMenu();
    });

    document.addEventListener('click', function (e) {
      const target = e.target;
      const its_menu = target == menu || menu.contains(target);
      const its_btnMenu = target == btnMenu;
      const menu_is_active = menu.classList.contains('nav__list--active');

      if (!its_menu && !its_btnMenu && menu_is_active) {
        toggleMenu();
      }
    });

}())

Другой код:


echo "Hello!";

Олег
27/08/2021, 14:11
Добрый день! А как сделать чтобы ВСЕ, несколько пунктов меню так работали? Делаю учебную работу, дают ссылки на вашу статью, сделал всё по ней, но работает только первый пункт меню. Другие не работают. Сейчас у меня вот так. document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.header__nav-bottom_link').forEach(function (BottomMenu) { BottomMenu.addEventListener('click', function (event) { let el = this el.classList.add('header__nav-bottom_link-active') document.querySelectorAll('.header__nav-bottom_sub').forEach(item => { if (item != el) { item.classList.remove('header__nav-bottom_sub-active') } }) document.querySelectorAll('.header__nav-bottom_link').forEach(item => { if (item != el) { item.classList.remove('header__nav-bottom_link-active') } }) const path = event.currentTarget.dataset.path document.querySelectorAll('.header__nav-bottom_sub').forEach(function (SubMenu) { SubMenu.classList.remove('.header__nav-bottom_sub-active') }) document.querySelector(`[data-target="${path}"]`).classList.add('header__nav-bottom_sub-active') }) }) })
Only to top
27/08/2021, 14:16
Добрый день, Олег. Не понял вашего вопроса. Возможно эта статья будет полезной.
Олег
27/08/2021, 15:01
У меня есть меню. В каждом пункте его есть подменю.
Пункт меню .header__nav-bottom_link и его подменю .header__nav-bottom_sub связаны через их атрибуты
.header__nav-bottom_link -> data-path и .header__nav-bottom_sub -> data-target.
Они в парах
Например
data-path="realism" и data-target="realism"
Скрипт написан выше.
Кликая по .header__nav-bottom_link -> data-path открывается его подменю - .header__nav-bottom_sub -> data-target.
Когда я применяю ваш скрипт к себе, такой связки уже нет и у меня работает только первый пункт меню со своим подменю.
У вас построено на
document.querySelector
У меня на
document.querySelectorAll('.header__nav-bottom_sub').forEach(item => {...
А меня их несколько .header__nav-bottom_link -> data-path - сколько пунктов меню.
И вот эта, ваша конструкция, адаптированная под меня не работает для остальных пунктов основного меню.
const btnMenu = document.querySelector('.header__nav-bottom_link'); const menu = document.querySelector('.header__nav-bottom_sub'); const toggleMenu = function () { menu.classList.toggle('header__nav-bottom_sub-active'); } btnMenu.addEventListener('click', function (e) { e.stopPropagation(); toggleMenu(); }); document.addEventListener('click', function (e) { const target = e.target; const its_menu = target == menu || menu.contains(target); const its_btnMenu = target == btnMenu; const menu_is_active = menu.classList.contains('header__nav-bottom_sub-active'); if (!its_menu && !its_btnMenu && menu_is_active) { toggleMenu(); } });
Мой только первый пункт меню и его подменю, один пункт. Как сделать чтобы ВСЕ пункты основного меню работали со своими sub.
Олег
27/08/2021, 15:27
Может я неверно адаптировал под себя ваш скрипт? Где-то сидит ошибка. Я её не вижу
Дмитрий
23/04/2023, 22:54
Спасибо большое за статью. Не мог долго найти как закрыть нажатием вне меню, у вас все толково и понятно описано.
rotrix
26/04/2023, 20:34
Спасибо большое. Выручили.