阻止执行父事件处理程序答案

【问题标题】：Prevent execution of parent event handler阻止执行父事件处理程序
【发布时间】：2009-09-09 09:38:19
【问题描述】：

我有一棵 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”的点击？

谢谢

【问题讨论】：

【解决方案1】：

您可以为孩子添加一个处理程序，以防止点击事件传播：

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 有一个点击处理程序
这是否也应该阻止父级上的引导 data-toggle="collapse" 工作？因为我尝试失败:(

【解决方案2】：

使用

停止事件冒泡到父元素，防止任何父元素处理程序不会被通知事件。

当点击 b 和 c

【讨论】：

【解决方案3】：

我有以下htmlstructure：

<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;
});

【讨论】：