IT技术 - 阻止执行父事件处理程序 - 吾爱随笔录

IT技术 javascript jquery

2021-02-01 01:12:37

我有一棵 div 树：

<div id="a" onclick="func">
    <div id="b" onclick="func">
         <div id="c" onclick="func">
         </div>
    </div>
</div>

当在 div 上单击时，它会使其子项不可见 - 即单击“a”将使“b”和“c”不可见。

function func{
   if ($(childId).hasClass("visible")){
    $(childId).removeClass("visible");
    $(childId).addClass("invisible");
}

问题是：单击“b”将调用“a”的单击并使“b”和“c”不可见。如何使用 jQuery 禁用对“a”的点击？

谢谢

3个回答

您可以为子项添加一个处理程序，以防止单击事件向上传播：

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}
$('#a').add('#b').click(handler);

这样点击到'#b'就不会传播到'#a'。也不会点击'#c'转到'#b'，因此也不会点击'#a'。

这非常酷，甚至适用于 $(".clickyClass a").click(function(e) {e.stopPropagation();}); 假设 .clickyClass 有一个点击处理程序

2021-03-12 01:12:37

这是否也应该防止引导data-toggle="collapse"父母工作？因为我尝试失败了:(

2021-03-23 01:12:37

利用

停止事件到父元素的冒泡，防止任何父处理程序收到该事件的通知。

当点击 b 和 c

我有以下html结构：

<a href="http://example.com">
    <div> 
       <button type="button">Save</button>
    </div>
</a>

我想防止在单击按钮时打开新页面。

我发现stopPropagation仅靠它是不够的。处理程序也应该return false。

$('button').click(function(event){
        event.stopPropagation();
        save();
        return false;
});

其它你可能感兴趣的问题