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

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

· jQuery · 1 мин чтения

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  сработает только когда пользователь нажмет внутри контейнера.

На этом все.

Успехов и поделись этой записью, если она была вам полезна.

Источник

Комментарии