Question

嗨我为我的页面编写简单的叠加层，灯箱类型，但是还要做其他的东西，无论如何，我在这个测试中遇到的更大的问题......我想要当你重叠覆盖蒙版时，覆盖层关闭..但是，如果你在儿童div中使用clic，就像叠加层中的内容div一样，叠加层必须保持打开状态..（这不是，这就是问题）

http://jsfiddle.net/7Cr2V/

我怎么能在javascript中说，如果我clic一个孩子div“overlayfull”请不要关闭或隐藏overlayfull ...这里是我的代码..以上是js小提琴，如果你想检查它的原因我的英语非常糟糕。

$('div.vidreveal a').click(
            function(event) {
                event.stopPropagation();
                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );


$('div.my-video-close').click(
            function(event) {
                event.stopPropagation();
                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

$('div.overlayfull').click(
            function(event) {
                event.stopPropagation();
                                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

Answer 1

一种解决方案是向孩子添加点击处理程序，在其中停止传播：

$('div.overlayfull').children().click(function(event){
  event.stopPropagation();
});

Answer 2

要么在overloay div中有div的事件，要么在那里停止传播。为了阻止在具有该特定事件的处理程序的父项的子项上发生事件的传播，请检查在paent处理程序中生成事件的目标，或者为子项添加处理程序并将event.stopPropagation()应用于避免事件冒泡到父母。

$('div.overlayfull div').click(function (e) {
    e.stopPropagation()
});

或检查生成事件的目标ID：

function (event) {
    if (event.target.id == 'overlayfull') { // Check here if the event originated from the intended div itself
        $('div.videoquon').fadeToggle(300);
        $(this).fadeToggle(300);
    }
});

Fiddle

Answer 3

停止传播仅适用于父元素，它不会停止活动元素本身。你可以用一个类包含文本，如果单击那个

则返回false

<div id='my-video'></div>
    <div class="message">CLIC HERE MUST NOT CLOSE THE OVERLAY</div>
</div>

if (event.target.className === 'message')
                    return false;

http://jsfiddle.net/59trN/

Answer 4

我认为如果我正确理解这个问题，这是最简单的方法。我只是检查你的处理程序，看看点击的div是否是你不想关闭模态的那个，并在触发淡出之前从函数返回：

$('div.overlayfull').click(
            function(event) {
                if ($(event.target).hasClass('videoquon')){
                    return;   
                }
                event.stopPropagation();
                                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

查看小提琴http://jsfiddle.net/aRDKS/

停止传播不起作用，避免儿童clic触发其他功能

4 个答案:

Fiddle