覆盖关闭

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 Level 3: Event dispatch and DOM event flow
• MDN: event.stopPropagation

Answer 2

这称为event propagation，您可以通过在点击click元素时添加e.stopPropagation();来阻止board事件传播DOM来阻止此操作：

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