Скрыть элемент при клике за его пределами (jQuery)

Данный рецепт можно применять для имитации потери фокуса блочными элементами на странице (событие blur не распространяется на любые блочные элементы в в некоторых браузерах). Допустим, что у нас на странице может появляться элемент с id = message, с сообщением для пользователя. И этот элемент должен пропадать, если пользователь кликнет по любому месту страницы, за исключением самого элемента. Эта задача может быть решена обработкой клика на элементе document. А в обработчике, нужно будет проверит, не является ли источником события наш элемент с id = message или один из его потомков:

$(function(){
$(document).click(function(event) {
if ($(event.target).closest(«#message»).length) return;
$(«p»).hide(«slow»);
event.stopPropagation();
});
});

Продемонстрируем рецепт на рабочем примере:

<!DOCTYPE html>
<html>
<head>
<script src=»http://code.jquery.com/jquery-latest.js»></script>
<style>
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}
</style>
</head>
<body>

<div>
<h3>DIV</h3>
</div>
<h3>BODY</h3>
<p>Окно с сообщением</p>

<script>
$(document).click( function(event){
if( $(event.target).closest(«p»).length )
return;
$(«p»).fadeOut(«slow»);
event.stopPropagation();
});
</script>

</body>
</html>

Навигация по записям