Отслеживаем клик вне элемента на JQuery

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

В этом посту мы рассмотрим простой пример отслеживания клика за пределами элемента на JQuery. Данное решение не претендует быть единственным верным решением. Вы конечно же можете реализовать это дело по-своему.

Пример отслеживания клика вне элемента

Про необходимость предварительного подключения библиотеки JQuery на странице думаю говорить не стоит. Допустим, что на странице располагается некий элемент. По отношению к нему мы будем отслеживать событие клика по странице:

<div id="menu">
	<ul>
		<li><a href="#">Пункт 1</a></li>
		<li><a href="#">Пункт 2</a></li>
		...
	</ul>
</div>

Получается есть некоторое меню, которое появляется при клике. Код показа блока мы пропускаем, т.к. это не основная задача в данный момент. Нужно чтобы меню закрывалось при клике за его пределами. Логика в этом случае получается довольно простой:
1. Нужно отследить событие клика по странице;
2. Далее проверить был ли сделан клик за пределами элемента;

jQuery(function($){
	$(document).mouseup(function (e){ // событие клика по странице
		if (!$("#menu").is(e.target) && // если клик сделан не по элементу
			$("#menu").has(e.target).length === 0) { // если клик сделан не по вложенным элементам
			$("#menu").fadeOut(); // скрываем блок
		}
	});
});

В этом примере проверка элемента происходит посредством его атрибута id. Первоначально отслеживается событие клика по странице. После инициализации события происходит проверка, что клик был сделан не на элементе и его вложенных элементах. Если эти два условия выполняются, блок меню будет закрыт. Как и говорилось ранее подобным методом можно выполнять проверку и для модальных окон. Не всегда ведь бывает удобно закрывать модальные окна по нажатию на отведённый для этого «крестик». Иногда ведь гораздо удобнее просто кликнуть по пустому месту за его пределами. Особенно это относится к простым подсказкам на сайте, которые не требуют активного действия от пользователя.