Javascript клик вне элемента

How to Detect Clicks Outside of An Element With JavaScript

Learning how to detect clicks outside of an element with JavaScript is a powerful skill that you can use in many situations, e.g. for hiding menus or modal windows. In a few minutes, you’ll know how.

Basic JavaScript outside element detection

Create a box element in HTML:

div class="box"> If you click anywhere outside of me, I’m gone faster than you can snap your fingers. div>

Let’s style the box with CSS and create a hide element utility class:

.box  margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; border-radius: 4px; padding: 1rem 1.5rem; font-size: 1.5rem; > .js-is-hidden  display: none; >

The js-* prefix on CSS classes for JavaScript hooks is a good practice. It let’s other developers know that they should not change it, as it might affect important behavior on the site.

And the JavaScript click detection script:

// Select element with box class, assign to box variable const box = document.querySelector(".box") // Detect all clicks on the document document.addEventListener("click", function(event)  // If user clicks inside the element, do nothing if (event.target.closest(".box")) return // If user clicks outside the element, hide it! box.classList.add("js-is-hidden") >)

Here’s a CodePen with all the code.

How the JavaScript code works:

• First, we find the box element with querySelector() and assign it to a variable called box
• Then we attach addEventListener() to our document and tell it to listen for clicks on the document (on the entire page).
• When the user clicks on the document, then the function() initiates a conditional statement inside its code block < .. >:
• If the user clicks inside the box element ( event.target.closest ), then do nothing (that’s the return; part).
• But if they click outside of the box element, then we hide it by using the classList.add method to add the .js-is-hidden CSS class (with the display: none property) that we created earlier.

Now you know how to detect clicks outside of elements!

Wrapping up

In a future tutorial, we’ll explore click detection in more depth, by putting together a practical web component that you can use on a real-life project. We could integrate click detection on a popup modal window, or perhaps a slide-in, slide-out menu?

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

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

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

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

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

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

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

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

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

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

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.

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(); >>);

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

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

Комментарии ( 9 )

 (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(); >>); >()) 

Добрый день! А как сделать чтобы ВСЕ, несколько пунктов меню так работали? Делаю учебную работу, дают ссылки на вашу статью, сделал всё по ней, но работает только первый пункт меню. Другие не работают. Сейчас у меня вот так. 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=»$«]`).classList.add(‘header__nav-bottom_sub-active’) >) >) >)

У меня есть меню. В каждом пункте его есть подменю.
Пункт меню .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.

Спасибо большое за статью. Не мог долго найти как закрыть нажатием вне меню, у вас все толково и понятно описано.

Источник

Обработка клика вне элемента на JS (и также на jQuery)

Прежде, чем начать, сразу скажу, что в этом уроке вы найдёте две реализации обработки клика вне блока – на чистом JavaScript и на jQuery.

Кроме того, если вы хотить прокачать свои знания в JavaScript, jQuery и даже React.js, то хочу порекомендовать вам свой видеокурс!

Когда бывает нужно скрыть (закрыть) элемент по клику за его пределами? Первое, что мне приходит в голову, это всплывающие (popup) окна и выпадающие (dropdown) меню. Понятное дело, что применение может быть гораздо шире.

Согласитесь, что намного удобнее осуществлять закрытие модального окна по клику вне окна, чем тащить указатель мыши к крестику и кликать по нему. А в некоторых ситуациях крестик и вовсе использовать не удастся (выпадающие кастомные селекты или меню).

И да, как только люди с этим не шаманят! Решений в интернете полно, но оптимальными их не назовёшь. Самое часто встречающееся из них, это когда скрипт проверяет, находится ли указатель мыши над элементом или нет.

Ну вот зачем усложнять код?

Хотя на самом деле ответ действительно очевиден — разработчики не знают, что можно сделать правильнее и проще, и делают так, как могут. Давайте разберем алгоритм:

1. У нас открыто всплывающее модальное окно, меню или что-то ещё.
2. Нам нужно, чтобы оно закрывалось не только на крестик (если таковой вообще имеется), но и по клику где-нибудь за его границами.
3. Значит нам нужно событие «Когда произошёл клик по странице».
4. В событие нужно добавить два условия «Если клик был не по нашему элементу» и «Если клик был не по дочерним элементам нашего элемента».
5. Если оба условия выполняются, скрываем элемент.

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

const div = document.querySelector( '#popup'); document.addEventListener( 'click', (e) => { const withinBoundaries = e.composedPath().includes(div); if ( ! withinBoundaries ) { div.style.display = 'none'; // скрываем элемент т к клик был за его пределами } })

И, так как мы всё-же говорили о закрытии модального окна, то я не могу в качестве бонуса не предоставить вам код его закрытия при нажатии на клавишу Escape на клавиатуре.

document.addEventListener('keydown', function(e) { if( e.keyCode == 27 ){ // код клавиши Escape, но можно использовать e.key div.style.display = 'none'; } });

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

jQuery(function($){ $(document).mouseup( function(e){ // событие клика по веб-документу var div = $( "#popup" ); // тут указываем ID элемента if ( !div.is(e.target) // если клик был не по нашему блоку && div.has(e.target).length === 0 ) { // и не по его дочерним элементам div.hide(); // скрываем его } }); });

Для разнообразия я использовал событие mouseup , т.е. когда кнопка мыши была нажата и уже отпущена. Для данного примера можно ещё добавить событие onclick на крестике, чтобы окно также закрывалось при клике на крестик.

И также в качестве бонуса – закрытие модального окна при нажатии клавиши Escape на клавиатуре:

$(document).on('keyup', function(e) { if ( e.key == "Escape" ) { $( "#popup" ).hide(); } });

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Обнаружение клика вне элемента в JavaScript

Существует распространенная задача в веб-разработке, когда требуется обнаружить клик мыши вне определенного элемента на веб-странице. Возьмем, к примеру, выпадающее меню. Когда пользователь кликает на заголовок меню, оно раскрывается. Но если пользователь кликает вне этого меню, то оно должно автоматически закрыться.

В JavaScript есть несколько способов решения этой задачи. Самый простой и популярный — использование библиотеки jQuery.

Пример использования кода на jQuery:

В этом коде регистрируется обработчик событий, который будет срабатывать при отпускании кнопки мыши ( mouseup ). Внутри обработчика проверяется, было ли нажатие вне элемента #menu . Если условие истинно, то вызывается метод hide() , который скрывает элемент.

Однако стоит отметить, что такой подход имеет свои недостатки. Во-первых, он не будет работать без подключенной библиотеки jQuery. Во-вторых, он не слишком эффективен, потому что обработчик будет срабатывать при каждом клике мыши на странице.

Более эффективный подход — это использование нативного JavaScript. В этом случае код будет выглядеть следующим образом:

document.addEventListener('mouseup', function(e) < var container = document.getElementById('menu'); if (!container.contains(e.target)) < container.style.display = 'none'; >>);

Здесь используется стандартный метод addEventListener для регистрации обработчика событий. Внутри обработчика проверяется, является ли цель клика ( e.target ) потомком элемента #menu . Если нет, то элемент скрывается с помощью изменения CSS свойства display .

Оба этих подхода решают задачу обнаружения клика вне элемента и могут быть использованы в зависимости от конкретных требований и условий работы.

Источник