JS のバブリング、イベントのキャプチャ、バブリングの防止方法の詳細な概要_JavaScript スキル

JavaScript および jquery イベントのイベント バブリングとイベント キャプチャには問題があります。この 2 つの問題とその解決策については、以下に詳しくまとめています。

イベント バブリングは子ノードから祖先ノードへのバブリングのプロセスです。

イベント キャプチャはその逆で、祖先ノードから子ノードへのプロセスです。

jquery クリック イベントの例を示します:

コードは次のとおりです:

コードをコピー コードは次のとおりです:

>

実際のプロジェクトでは、イベントのバブリングとイベントのキャプチャを防ぐ必要があります。

イベントのバブリングを防ぐメソッド:

方法 1: 現在のクリック イベントで false を返す




コードをコピーします


コードは次のとおりです:

$('#clickMe').click(function(){ alert('hello'); return false; });

方法 2:




コードをコピーします

次のように:

$('#clickMe').click(function(event){ alert('hello'); var e = window.event | |event; if ( e.stopPropagation ){ //イベント オブジェクトが提供される場合、これは非 IE ブラウザです。

e.stopPropagation()else{

//IE互換の方法 キャンセルイベントバブリング
window.event.cancelBubble = true;


イベントのキャプチャはブロックできないようです