Закрытие оверлея

Question

У меня есть оверлей:

<div id="overlayer" class="overlayer">
<div id="board" class="board"></div>
</div>

С этими свойствами CSS:

#overlayer
{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-linear-gradient(
        top,
        #807980 0%,
        #3d323d);
background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#807980),
        to(#3d323d));
        opacity:0.6;
        z-index:9998;
}

#board
{
position:relative;
left:33%;
top:20%;
width:600px;
height:450px;
border-radius:15px;
background-color:white;
z-index:9999;
display:none;
}

И я запускаю его с помощью этого сценария:

<script type="text/javascript">
$(document).ready(function(){
function overlayerOn(){
    $('#overlayer').fadeIn(800);
}

function overlayerOff(){
    $('#overlayer').fadeOut(800);
};

$('#fr').click(function(e){
    overlayerOn();
    var $br = $('#board');
    $br.css('display', 'block');
    });

$('#overlayer').click(function(e){
    overlayerOff();});

});
</script>

Но когда я закрываю оверлей, мне бы хотелось, чтобы он закрывался только при нажатии на оверлей, но мой скрипт закрывается, даже когда я нажимаю на div в середине оверлея.Любая идея?Спасибо ...

Answer 1

Вы должны остановить распространение события:

$('#board').click(function(e){e.stopPropagation();});

Смотри также

• W3C: DOM Уровень 3: отправка событий и поток событий DOM
• MDN: event.stopPropagation

Answer 2

см. ТАК дубликат Q в основном вы должны предотвратить распространение событий на внутреннем div,

$("#board").click(function(e){
   e.stopPropagation(); //except on IE this works
});

Answer 3

Да, чувак, трюк использует свойство e.target Замените функцию закрытия на это, и вы должны быть милыми:

$('#overlayer').click(function(e){
    if (e.target === $('#overlayer')[0]) {
     overlayerOff();
    }
});

Это все, что связано с пузырями событий, прочитайте об этом плохом парне, и вы должны это быстро понять: http://www.quirksmode.org/js/events_order.html

Answer 4

Вы можете попробовать добавить:

$("#board").click(function(e) {
    e.stopPropagation();
    return false;
});

Вы имели в виду нечто подобное?

Answer 5

Это называется распространением события , вы можете остановить это, запретив распространению события click вверх по DOM, добавив e.stopPropagation(); при нажатии на элемент board, подобный этому:

$('#board').click(function(e){
    e.stopPropagation();
});