如何防止孩子影响家长

Question

如何防止CHILD元素影响PARENT元素？

的jQuery：

$("#parent").click(function() { 
    alert('parent clicked'); 
}); 
$("#child").click(function() { 
    alert('child clicked'); 
}); 

HTML：

<div id="parent"> 
    click me - parent 
    <div id="child">click me - child</div> 
</div> 

如果你点击了孩子，家长也被激活，我们有2个警报。

那么如何防止孩子影响父母？

Answer 1

event.stopPropagation()

$("#child").click(function(event) { 

    event.stopPropagation(); 

    alert('child clicked'); 
}); 

调用event.stopPropagation()将向上冒泡DOM树停止活动。

Answer 2

这叫做event bubbling或event propagation。这可以通过在您的代码中添加e.stopPropagation()来防止。如果您还想停止默认行为，则可以简单地执行：return false;。

return false;基本上都是：e.stopPropagation()和e.preventDefault()。如果您正在使用<a>标签，并且您希望防止单击后导航页面，这会非常有用。