3

I write simple overlay for my page, kind of lightbox, but is going to do other stuff, anyway, My bigger problem in this tests... is I want when you click the overlay mask, the overlay close... But if you click in the children div, like the content div inside the overlay the overlay must remain open.. (which is not, that's the problem)

http://jsfiddle.net/7Cr2V/

How can I say in Javascript, if I click a child div of "overlayfull" please do not close or hide the overlayfull ... here is my code.. and above is the js fiddle if you want to check it cause my English is very bad.

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

4 回答 4

2

一种解决方案是向子项添加一个单击处理程序，您可以在其中停止传播：

$('div.overlayfull').children().click(function(event){
  event.stopPropagation();
});
于 2013-06-17T20:48:52.333 回答
1

要么在 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);
    }
});

小提琴

于 2013-06-17T20:48:43.197 回答
1

停止传播仅适用于父元素，它不会停止活动元素本身。您可以将文本包含在一个类中，如果单击该类，则返回 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/

于 2013-06-17T20:52:05.693 回答
1

如果我正确理解了这个问题，我认为这是最简单的方法。我只是在您的处理程序中检查被点击的 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/

于 2013-06-17T20:53:02.363 回答