Ответы здесь слишком буквально восприняли вопрос ОП. Как эти ответы можно развернуть в сценарий, в котором есть МНОГИЕ дочерние элементы, а не один тег <a>
? Вот один из способов.
Допустим, у вас есть фотогалерея с затемненным фоном и фотографиями по центру в браузере. Когда вы щелкаете черный фон (но не внутри него), вы хотите, чтобы наложение закрылось.
Вот несколько возможных HTML:
<div class="gallery" style="background: black">
<div class="contents"> <!-- Let's say this div is 50% wide and centered -->
<h1>Awesome Photos</h1>
<img src="img1.jpg"><br>
<img src="img2.jpg"><br>
<img src="img3.jpg"><br>
<img src="img4.jpg"><br>
<img src="img5.jpg">
</div>
</div>
А вот как будет работать JavaScript:
$('.gallery').click(
function()
{
$(this).hide();
}
);
$('.gallery > .contents').click(
function(e) {
e.stopPropagation();
}
);
Это остановит события щелчка от элементов внутри .contents
из каждого исследования .gallery
, поэтому галерея закроется только при щелчке в области выцветшего черного фона, но не при нажатии в области содержимого. Это может быть применено ко многим различным сценариям.