覆蓋收盤

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關閉覆蓋層我希望它只在點擊覆蓋層時關閉，但即使在覆蓋層中間點擊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，你可以通過阻止來阻止此事從這樣的board元素，當點擊添加e.stopPropagation();傳播了DOM事件210：

$('#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 
});