Скрыть элемент при клике за его пределами
Данный рецепт можно применять для имитации потери фокуса блочными элементами на странице (событие blur не распространяется на любые блочные элементы в в некоторых браузерах). Допустим, что у нас на странице может появляться элемент с id = message, с сообщением для пользователя. И этот элемент должен пропадать, если пользователь кликнет по любому месту страницы, за исключением самого элемента. Эта задача может быть решена обработкой клика на элементе document. А в обработчике, нужно будет проверит, не является ли источником события наш элемент с id = message или один из его потомков:
$(function(){ $(document).click(function(event) { if ($(event.target).closest("#message").length) return; $("p").hide("slow"); event.stopPropagation(); }); });
Продемонстрируем рецепт на рабочем примере:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div{float:right; width:200px; height:200px; padding:10px; background-color:#f99; border:1px solid #69c;} p{position:absolute; top:60px; left:130px; padding:10px; width:130px; height:100px; background-color: #99f; border:1px solid #9cf; text-align:center; font-size:15pt} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div~gt~ ~lt~h3~gt~DIV~lt~/h3~gt~ ~lt~/div~gt~ ~lt~h3~gt~BODY~lt~/h3~gt~ ~lt~p~gt~Окно с сообщением~lt~/p~gt~ ~lt~script~gt~ $(document).click( function(event){ if( $(event.target).closest("p").length ) return; $("p").fadeOut("slow"); event.stopPropagation(); }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~