Как в javascript закрывать div при клике вне этого дива

Javascript → Как скрыть элемент при клике вне этого элемента

Распространённая задача — скрыть всплывающее js окно при клике вне этого окна.

Смысл в следующем — вешаем на документ обработчик onclick, который благодаря всплытию событий (bubbling) будет ловить все клики на странице. В этом обработчике, в переменной event.target будет доступен элемент, на котором произошёл клик. С помощью jQuery метода closest() проверяем где произошёл клик — на элементе или вне элемента. Если вне, то скрываем элемент.

Show message Some text.

$('#toggle-link').click(function(e) < var $message = $('#message'); if ($message.css('display') != 'block') < $message.show(); var firstClick = true; $(document).bind('click.myEvent', function(e) < if (!firstClick && $(e.target).closest('#message').length == 0) < $message.hide(); $(document).unbind('click.myEvent'); >firstClick = false; >); > e.preventDefault(); >);

Переменная firstClick нужна, чтобы не скрывать #message сразу после его показа, так как bind() сработает до всплытия события.

Метод e.preventDefault(); запрещает выполнять дефолтную реакцию ссылки на клик, т.е. переход на пустой анкор # .

Добавлено 09.06.2014

$(function() < $('#toggle-link').click(function(event) < $('#message').toggle(); >); $(document).click(function (event) < if ($(event.target).closest('#message').length == 0 && $(event.target).attr('id') != 'toggle-link') < $('#message').hide(); >>); >);

Похожие записи

Вывести карту из конструктора Яндекс.Карт в jQuery UI Dialog
ScrollToFixed — jQuery плагин для фиксации блоков при пропадании их из зоны видимости
Включаем поддержку HTML5 атрибута placeholder для устаревших браузеров
Как подключить javascript файл из своего js скрипта
Пользовательские события в jQuery

Конечно я навлеку тысячи ненависти сейчас. Но, что делать, если jquery старый? Ибо closest() появился только в 1.3.
А у друпала 6 по умолчанию, 1.2.6, если не ошибаюсь, в общем ниже версия.
Как такую задачу выполнить без оверлея прозрачного?

Но, что делать, если jquery старый?

Кстати, недавно такую же задачу решал:

$('#open-login-link').click(function(e) < $('#user-login-form').toggle() e.preventDefault() e.stopPropagation() >) $('#user-login-form').click(function(e) ) $('body').click(function() )

тут есть пару проблем:

1. не сработает если всплывающих окон будет больше одного
2. дёргать .hide() на каждый клик в браузере имхо не разумно

Про hide() да, стоит переделать, хотя думаю, конечный пользователь все равно разницы не ощутит. В любом случае использование stopPropagation(), упрощает код.

Кстати, всесто $message.css(‘display’) != ‘block’ можно сделать так $message.is(‘:hidden’)

Спасибо xandeadx и спасибо Ch

Насколько глупо вместо e.preventDefault() использовать return false? Я всегда так делаю.

return false запрещает всплытие, что не всегда уместно

Петров Николай

Если поставить return false вместо e.preventDefault();
— приходится два раза кликать вне попапа, чтобы он закрылся

В скрипте все круто, только я принципиально не работаю со стилями напрямую из JS, предпочитая оперировать только классами. Объяснять долго, но это дает более высокую степень свободы для разметки. Да, в данном случае эта свобода не нужна, но у меня это уже привычка.

$('.langSelectLink').click(function(e) < var popup = $('.linkSelectPopup'); if (popup.hasClass('langSelectionHidden')) < popup.removeClass('langSelectionHidden'); var firstClick = true; $(document).bind('click.myEvent', function(e) < if (!firstClick && $(e.target).closest('.linkSelectPopup').length == 0) < popup.addClass('langSelectionHidden'); $(document).unbind('click.myEvent'); >firstClick = false; >); > e.preventDefault(); >);

.langSelectionHidden

Примного Вам благодарен, данный пример меня выручил.

а как быть если каких блоков не один?(Например: несколько блоков идут подряд, при клике на которые должны появляться внутренние блоки. И когда ты щелкаешь на блок, то внутренний блок скрывается) Данный метод не работает если щелкать подряд меду этими блоками(внутренние блоки перестают закрываться).

Спасибо за прекрасный пример!

Все работает отлично, но на одной из страниц конфликтует со слайдером (jflowSlider), т.е. элемент скрывается при автоматическом изменении слайдов.

Буду искренне благодарен за любую помощь в решении моей проблемы!

Подскажите пожалуйста, как сделать тут так, чтобы при нажатии, появлялся блок с информацией, но скрывалась ссылка по которой кликали и вместо этого появилась ссылка в самом блоке, типа — (скрыть) . Спасибо. Если можно, то пропишите полностью скрипт так я в скриптах не понимаю.

а как быть если каких блоков не один?(Например: несколько блоков идут подряд, при клике на которые должны появляться внутренние блоки. И когда ты щелкаешь на блок, то внутренний блок скрывается) Данный метод не работает если щелкать подряд меду этими блоками(внутренние блоки перестают закрываться).

Возьми напиши плагин, который при щелчке на ссылку будет скрывать все твои меню. И тогда алгоритм работает на множествах ссылках )))

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

$(document).ready(function () $(«.hs-menubar»).hsMenu();
$(«.hamburger»).click(function() $(this).toggleClass(«is-active»);
>);
>);

ЧеловекКоторомуПомогЭтотПост

чувак храни тебя Боже . Ты мне очень помог . Спасибо огромнейшее, я в 2020 не мог найти нужное мне решение и нашёл его тут .

Как отследить клик вне элемента

Чтобы при закрытии окно навигации скрывалось не мгновенно для свойства visibility применяем задержку 0.6s transition: visibility 0s 0.6s, opacity 0.6s ease; , то есть окно навигации скрывается полностью только после того, как отработает плавное исчезание через свойство opacity

.container < max-width: 1140px; margin: 0 auto; padding: 0 15px; >.header < padding: 15px 0; background: #485696; border-radius: 15px; >.header .container < position: relative; >.header__flex < display: flex; align-items: center; justify-content: space-between; >.header__logo < font-size: 24px; font-weight: bold; color: #fff; >.header__button < background: #fff; height: 48px; border-radius: 15px; padding: 0 48px; display: inline-flex; align-items: center; justify-content: center; color: #485696; position: relative; font-size: 18px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: 0.3s ease; border: 2px solid transparent; >.header__button:hover < background: #485696; color: #fff; border-color: #fff; >.nav < position: absolute; top: calc(100% + 30px); right: 15px; background: #485696; border-radius: 25px; font-size: 18px; padding: 15px 0; visibility: hidden; transition: visibility 0s 0.6s, opacity 0.6s ease; /* при закрытии окна навигации, сначала плавно понижается непрозрачность - opacity: 0; затем мгновенно исчезает через 0.6s ожидания - visibility: hidden; */ opacity: 0; overflow: hidden; >.nav_active < transition: visibility 0s 0s, opacity 0.6s ease; /* при открытии окна навигации, оно сначала мгновенно появляется - visibility: visible;, затем плавно повышается непрозрачность - opacity: 1; */ opacity: 1; visibility: visible; >.nav ul < padding: 0; margin: 0; list-style: none; >.nav ul li a < display: block; padding: 5px 48px; white-space: nowrap; color: #fff; text-decoration: none; transition: 0.3s ease; >.nav ul li a:hover < background: #6372b4; >.nav ul li a:active

JavaScript

Напишем логику на JavaScript

e.target — элемент, на котором произошло определенное событие, в данном случае — клик

closest() — этот метод ищет ближайший родительский элемент по заданному селектору

Ниже код с комментариями

document.addEventListener('DOMContentLoaded', () => < // Структура страницы загружена и готова к взаимодействию const button = document.querySelector('.header__button') // находим кнопку для открытия/закрытия окна навигации const nav = document.querySelector('.nav') // находим окно навигации button.addEventListener('click', () =>< // при клике на кнопку nav.classList.toggle('nav_active') // открываем/закрываем окно навигации, добаляя/удаляя активный класс >) window.addEventListener('click', e => < // при клике в любом месте окна браузера const target = e.target // находим элемент, на котором был клик if (!target.closest('.nav') && !target.closest('.header__button')) < // если этот элемент или его родительские элементы не окно навигации и не кнопка nav.classList.remove('nav_active') // то закрываем окно навигации, удаляя активный класс >>) >)

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

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

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

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

Всплывающее окно на jQuery

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

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

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

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

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

Клик вне элемента на чистом 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. Преподаватель в школе Нетология.

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

Закрытие элемента по клику за пределами его области (вне элемента) в jquery

Сразу приведу пример. Представим простой интернет магазин, а именно страницу каталога с товарами. У каждого товара есть кнопка «подробнее», при нажатии на которую, появляется плашка с информацией о товаре.

Но у каждого товара есть своя такая плашка, которая скрытая и появится только по нажатии на кнопку. Так вот, окно открылось, но как его закрыть?

Можно конечно создать кнопку «закрыть», но представьте, как это не удобно. Пользователь обычно кликает за область нашего окна и вот именно так и нужно его закрывать.

Для начала, к примеру, создадим три товара, с одинаковым общим классом.

  
Текст, который скрывается
 
  
Текст, который скрывается
 
  
Текст, который скрывается

Затем подключаем библиотеку jquery и вставляем следующий скрипт

Также подключите стили или скройте все блоки через js

 .button_div

После этого, при нажатии на кнопку «подробнее» будет появляться блок с текстом, а при нажатии в любое место вне элемента, блок исчезает. Посмотрите ниже работу скрипта или скачайте его.