停止传播不工作，避免孩子点击触发其他功能

Stop propagation not working, avoid children click trigger other function

本文关键字：功能 其他 孩子 传播 工作      更新时间：2023-09-26

我为我的页面写了简单的叠加，有点像灯箱，但要做其他的事情，无论如何，我在这个测试中更大的问题…我想当你点击叠加蒙版，叠加关闭…但是如果你点击了childrendiv，就像contentdiv在overlay里面一样，overlay必须保持打开状态。(事实并非如此，这就是问题所在)

http://jsfiddle.net/7Cr2V/

在Javascript中我怎么说，如果我点击& layfull&quot的子div请不要关闭或隐藏覆盖层…这是我的代码。上面是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);
            }
        );

一种解决方案是向子类添加一个click处理程序，在该处理程序中停止传播:

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

stop propagation只对父元素有效，而不能停止活动元素本身。可以用一个类包含文本，如果单击

则返回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/

我认为这是最简单的方法，如果我理解正确的话。我只是在你的处理程序中检查一下，看看被点击的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/

为div内部设置一个事件，重载div并在其上停止传播。为了阻止在具有特定事件处理程序的父节点的子节点上发生的事件传播，可以检查在父节点处理程序中生成事件的目标，或者为子节点添加处理程序并应用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);
    }
});

小提琴

相关文章：