Клик вне элемента / всплытие событий / проблема iOs
Очень часто нужно сделать выпадающие списки, блоки меню, модальные окна, и другие элементы, которые, скрываются после клика вне элемента.
Суть метода проста: Нужно зарегистрировать обработчик событий (например клик) на один из корневых элементов Веб страницы (например document). При вызове события, мы просто проверим, нет ли среди элементов, попавших под всплытие, нашего целевого элемента (модалки или что там у вас?).
События в JavaScript имеют особенность всплывать (bubling), от самого глубоко вложенного элемента и до корневого узла. Это важно понимать новичку. Например, если мы кликнули по кнопке в модальном окне, событие прокатится по всем родительским элементам, модальному окну, обертке, боди и самому документу. И если на этих элементах зарегистрирован обработчик события, он непременно отработает.
На десктопе это работает отлично, а вот с iOs возникли проблемы. Дело в том, что браузеры на этой системе, не создают всплытие событий на таких элементах как document, body и подобных, и наоборот, от элементов типа кнопки, ссылок и других интерактивных элементов, событие отлично всплывает. Это сделано специально, для избежания случайных нажатий по экрану девайса.
Замечу, что на Android нет этой оптимизации, и собственно, проблемы тоже.
Есть один грязный хак, как можно заставить элементы с невсплывающими событиями – стать элементами с всплывающими событиями. Достаточно в стилях такого элемента, указать cursor: pointer.
Эту проблему можно решить и другим способом. События touch создают всплытие на любых элементах DOM. Нужно просто использовать на мобильных устройствах события touch, а на десктопе событие click. И это будет совершенно верно, для разных устройств – разные события.
Как определить мобильное устройство? Есть много способов, один из них в этом исправленном примере:
Из всего этого, следует помнить о таких особенностях, как всплытие (bubling) на разных устройствах и использовать их по прямому назначению.
На этом все! Спасибо!
