jQuery набрал огромную популярность и теперь на эту тему задают кучу вопросов каждый день. Один из часто задаваемых вопросов — это «как сделать клик вне элемента с помощью jQuery?».
Специально для этого я написал эту небольшую статью. В ней я расскажу как это сделать. Давайте приступим.
Демо
Я написал небольшое демо, чтобы вы могли посмотреть как все работает. Нажмите на белый или светло синий цвет, чтобы вам показало «Клик внутри» или «Клик снаружи».
See the Pen ENLOzM by Alexander (@bologer) on CodePen.21516
Как это все работает
Давайте возьмем JavaScript код и разберем его ниже.
$(document).mouseup(function (e)
{
var container = $("#container");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
Пятая строка самая важная. Давайте разберем ее поподробнее.
!container.is(e.target) — простыми словами: контейнер не был целью куда был сделан клик
container.has(e.target).length === 0 — или не является потомком контейнера
Этими двумя параметрами мы утверждаем, что пользователь нажал снаружи container элемента и тогда else сработает только когда пользователь нажмет внутри контейнера.
На этом все.
Успехов и поделись этой записью, если она была вам полезна.
