Блог / jQuery / jQuery: Закриття елемента при натисканні за межами його області (поза елементом)
Коли буває потрібно приховати (закрити) елемент при натисканні за його межами? Перше, що мені спадає на думку, це спливаючі (popup) вікна і випадають (dropdown) меню. Ясна річ, що застосування може бути набагато ширше.
Погодьтеся, що набагато зручніше закрити спливаюче вікно, клікнувши за його межами, ніж тягнути курсор миші до хрестика і кликати по ньому. А в деяких ситуаціях хрестик і зовсім використовувати не вдасться (випадають кастомниє СЕЛЕКТА або меню).
І так, як тільки люди з цим не шаманять! Рішень в інтернеті повно, але оптимальними їх не назвеш. Саме часто зустрічається з них, це коли скрипт перевіряє, чи знаходиться покажчик миші над елементом чи ні.
Ну ось навіщо ускладнювати код?
Хоча насправді відповідь дійсно очевидний - розробники не знають, що можна зробити правильніше і простіше, і роблять так, як можуть. Давайте розберемо алгоритм:
- У нас відкрито спливаюче вікно, меню або щось ще.
- Нам потрібно, щоб воно закривалося не тільки на хрестик (якщо такий взагалі є), але і при натисканні де-небудь за його межами.
- Значить нам потрібно подія «Коли стався клік по сторінці».
- У подія потрібно додати дві умови «Якщо клік був не по нашому елементу» і «Якщо клік був не по дочірнім елементам нашого елементу».
- Якщо обидві умови виконуються, приховуємо елемент.
Простіше простого, код jQuery буде таким:
