ホームページ >ウェブフロントエンド >jsチュートリアル >JS のバブリング、イベントのキャプチャ、バブリングの防止方法の詳細な概要_JavaScript スキル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 16:49:261707ブラウズ

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

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

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

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

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

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


test >

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

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

方法 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;


イベントのキャプチャはブロックできないようです
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。