返品時にイベントバブリングを有効にするにはどうすればよいですか？

Question

こんにちは、私のhtmlです。

// consider all are of same size 
<div id="grand-parent"> 
    <div id="parent"> 
     <div id = "child"> 
     </div> 
    </div> 
</div> 

Javascriptを。

$("#grand-parent").click(function(){ 
    alert("grand-parent"); 
}); 

$("#parent").click(function(){ 
    alert("grand-parent"); 
}); 

// consider this as child event but actual child event comes from third party. 
$("#parent").click(function(){ 
    return false; 
}); 

イベントは、子、親、grand-parentの順番でバインドされます。 divをクリックすると、子要素のイベントがトリガーされ、最初にfalseが返されます。これによりイベントのバブリングが停止します。しかし、祖父母divのクリックイベントもトリガーする必要があります。

ブロッカー：チャイルドクリックイベントは常に最初にバインドされ、サードパーティ製のAPIですので、タッチできません。

ご了承ください。

Answer 1

あなたが子供をクリックすると、最初の祖父母がトリガーされ、次に子供、次に親をクリックすると、以下のコードを使用することができます。親をクリックすると、親親イベントが起動し、親をクリックして親親をクリックすると、親親だけがトリガーされます。 このコードでは、私はイベントキャプチャのコンセプトを適用しているので、祖父母が最初に呼び出され、コントロールは子と親に行きます。

JSフィドルリンク -

https://jsfiddle.net/oe1qxsub/

HTML -

<div id="grand-parent"> 
<div id="parent"> 
    <div id = "child"> 
    </div> 
</div> 
</div> 

JS -

$("#grand-parent").get(0).addEventListener("click", function(){ 
alert("grand-parent"); 
}, true); 



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


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

CSS -

#grand-parent{ 
background:blue; 
width:80px; 
height:80px; 
} 
#parent{ 
background:red; 
width:50px; 
height:30px; 
} 
#child{ 
background:yellow; 
width:20px; 
height:20px; 
} 

Answer 2

ソリューションは、壮大な親に登録するときにaddEventListenerのuseCaptureパラメータを使用することです。

これは、子イベントを呼び出す前にgrand-parentイベントを呼び出します。

the doc for addEventListenerを参照してください。