如何防止孩子影響家長

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>標籤，並且您希望防止單擊後導航頁面，這會非常有用。