子が親に影響を与えないようにする方法

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>タグを使用していて、クリック後にページが移動しないようにしたい場合に便利です。