Overlay закрытия

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> 

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

Answer 1

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

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

Смотрите также

• W3C: DOM Level 3: Event dispatch and DOM event flow
• MDN: event.stopPropagation

Answer 2

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

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

Answer 3

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

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

вы имели в виду что-то вроде этого.

Answer 4

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

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

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

Answer 5

см SO duplicate Q в основном вы должны предотвратить распространение событий на внутренней DIV,

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