防止执行父事件处理程序

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时