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

Рассмотрим, как отловить клик вне элемента с помощью 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>

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

  1. вне меню .menu
  2. вне его дочерних элементов .menu *
  3. по клику кнопки .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 ( event.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();
    }
});

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

Николай
30/09/2019 19:58