jQuery: клік поза елементом

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

Погодьтеся, що набагато зручніше закрити спливаюче вікно, клікнувши за його межами, ніж тягнути курсор миші до хрестика і кликати по ньому. А в деяких ситуаціях хрестик і зовсім використовувати не вдасться (випадають кастомниє СЕЛЕКТА або меню).

І так, як тільки люди з цим не шаманять! Рішень в інтернеті повно, але оптимальними їх не назвеш. Саме часто зустрічається з них, це коли скрипт перевіряє, чи знаходиться покажчик миші над елементом чи ні.

Ну ось навіщо ускладнювати код?

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

1. У нас відкрито спливаюче вікно, меню або щось ще.
2. Нам потрібно, щоб воно закривалося не тільки на хрестик (якщо такий взагалі є), але і при натисканні де-небудь за його межами.
3. Значить нам потрібно подія «Коли стався клік по сторінці».
4. У подія потрібно додати дві умови «Якщо клік був не по нашому елементу» і «Якщо клік був не по дочірнім елементам нашого елементу».
5. Якщо обидві умови виконуються, приховуємо елемент.

Простіше простого, код jQuery буде таким:

jQuery (function ($) {$ (document). mouseup (function (e) {// подія кліка по веб-документу var div = $ ( "#popup"); // тут вказуємо ID елементу if (! div. is (e. target) // якщо клік був не по нашому блоку && div. has (e. target) .length === 0) {// і не по його дочірнім елементам div. hide (); // приховуємо його} });});

Для даного прикладу можна ще додати подію onclick, щоб вікно також закривалося при кліці на хрестик.

Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .

Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .