防止执行父事件处理程序

Question

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

感谢

Answer 1

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

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

这种方式点击'#b'不会传播到'#a'。点击'#c'也不会转到'#b'，因此也不会转到'#a'。

Answer 2

使用

event.stopPropagation()

  

停止将事件冒泡到   父元素，阻止任何父母   处理者被通知   事件

点击b和c

Answer 3

我有以下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;
});