Когда бывает нужно скрыть (закрыть) элемент по клику за его пределами? Первое, что мне приходит в голову, это всплывающие (popup) окна и выпадающие (dropdown) меню. Понятное дело, что применение может быть гораздо шире.
Согласитесь, что намного удобнее закрыть всплывающее окно, кликнув за его пределами, чем тащить указатель мыши к крестику и кликать по нему. А в некоторых ситуациях крестик и вовсе использовать не удастся (выпадающие кастомные селекты или меню).
И да, как только люди с этим не шаманят! Решений в интернете полно, но оптимальными их не назовёшь. Самое часто встречающееся из них, это когда скрипт проверяет, находится ли указатель мыши над элементом или нет.
Ну вот зачем усложнять код?
Хотя на самом деле ответ действительно очевиден — разработчики не знают, что можно сделать правильнее и проще, и делают так, как могут. Давайте разберем алгоритм:
- У нас открыто всплывающее окно, меню или что-то ещё.
- Нам нужно, чтобы оно закрывалось не только на крестик (если таковой вообще имеется), но и по клику где-нибудь за его границами.
- Значит нам нужно событие «Когда произошёл клик по странице».
- В событие нужно добавить два условия «Если клик был не по нашему элементу» и «Если клик был не по дочерним элементам нашего элемента».
- Если оба условия выполняются, скрываем элемент.
Проще простого, код jQuery будет таким:
Для данного примера можно ещё добавить событие onclick , чтобы окно также закрывалось при клике на крестик.
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
Рассмотрим, как отловить клик вне элемента с помощью jQuery, а затем на чистом JavaScript. Это может понадобится, например, для всплывающих окон или для закрытия меню при клике за его пределами.
Клик вне элемента jQuery
Рассмотрим, как отловить клик за пределами блока
Пример: имеем блок, пусть это будет всплывающее окно .pop-up . Будем закрывать поп-ап при клике за его пределами:
Закрытие меню при клике вне его, а также по нажатию на кнопку
Рассмотрим ситуацию, когда необходимо закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку.
Будем закрывать меню, если клик совершён:
- вне меню .menu
- вне его дочерних элементов .menu *
- по клику кнопки .btn
Клик вне элемента на чистом JavaScript
В данном примере мы скрываем блок при клике вне элемента с классом pop-up
Закрытие меню при клике вне его — нативный JavaScript
Как во втором примере будем закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку. Но теперь уже на чистом JavaScript.
jQuery набрал огромную популярность и теперь на эту тему задают кучу вопросов каждый день. Один из часто задаваемых вопросов — это «как сделать клик вне элемента с помощью jQuery?».
Специально для этого я написал эту небольшую статью. В ней я расскажу как это сделать. Давайте приступим.
Я написал небольшое демо, чтобы вы могли посмотреть как все работает. Нажмите на белый или светло синий цвет, чтобы вам показало «Клик внутри» или «Клик снаружи».
See the Pen ENLOzM by Alexander (@bologer) on CodePen.21516
Как это все работает
Давайте возьмем JavaScript код и разберем его ниже.
Пятая строка самая важная. Давайте разберем ее поподробнее.
!container.is(e.target) — простыми словами: контейнер не был целью куда был сделан клик
container.has(e.target).length === 0 — или не является потомком контейнера
Этими двумя параметрами мы утверждаем, что пользователь нажал снаружи container элемента и тогда else сработает только когда пользователь нажмет внутри контейнера.
Успехов и поделись этой записью, если она была вам полезна.
