個別のクリック観測機能を持つ要素内の要素のクリックを観測

Question

私は別の要素内に要素を持ち、両方とも別々のクリック機能を持っています。子要素にクリック機能がある場合は、親要素を無視または停止します。たとえば：

<div class="parent"> 
    <div class="child1">Child Click Function</div> 
    Parent Click Function 
</div> 
<script type="text/javascript"> 
document.observe('dom:loaded',function(){ 
    if ($$('.parent') != undefined) { 
     $$('.parent').invoke('observe','click', function(e) {  
     alert('parent');   
     }); 
    } 
    if ($$('.child1') != undefined) { 
     $$('.child1').invoke('observe','click', function(e) {  
     alert('child');   
     }); 
    }   
}); 
</script> 

は何が起こるかというとchild1のをクリックしたときにchild1のが親の範囲内であるため、両方のその親がトリガされていることです。私は子供が選択されたときに観察を止める/停止したいが、親の中の何かをクリックすると、それはうまくいく。

ありがとうございました。

Answer 1

イベントバブリングと呼ばれる現象が発生しました。特定の要素のイベントは、明示的にバブリングを停止しない限り、ルートノードに到達するまでDOMをバブルアップします。

$$('.child1').invoke('observe','click', function(e) {  
    Event.stop(e);  
    alert('child');   
}); 

http://api.prototypejs.org/dom/Event/prototype/stop/

Answer 2

私は1つが働くわからないんだけど、私は通常、両方の使用：

if (event.cancelBubble) 
    event.cancelBubble(); 
if (event.stopImmediatePropagation) 
    event.stopImmediatePropagation(); 

をとのonclick関数にクリックイベントを渡します。

Answer 3

どちらの伝播を停止し、バブルをキャンセルすべて一緒にイベントの伝播を停止します：あなたはプロトタイプを使用しているように見えるので、次のようにあなたの子供のイベントハンドラを更新することはトリックを行う必要があります、 私はあなたが親に関連するイベントをバイパスしたいと思っています。 子がクリックされた場合に親に.unbind（）を使用することをお勧めします。たとえば、

(CHECK CHILD CLICK) { 
$('.parent').unbind('click');}