ホームページ > 記事 > ウェブフロントエンド > JQuery イベントのバブリングの概要とイベントのバブリングを防ぐ方法_jquery

JQuery イベントのバブリングの概要とイベントのバブリングを防ぐ方法_jquery

WBOYオリジナル: 2016-05-16 17:45:41892ブラウズ

JS イベントバブリングとは何ですか?
オブジェクトで特定のタイプのイベント (onclick イベントなど) をトリガーします。オブジェクトがこのイベントのハンドラーを定義している場合、このイベントハンドラーが定義されていない場合、このイベントはこのハンドラーを呼び出します。イベントが true を返すと、このイベントは、処理されるまで (親オブジェクトの同様のイベントがすべてアクティブ化されます)、オブジェクト階層の最上位に到達するまで、このオブジェクトの親オブジェクトに内部から外部に伝播します。 , つまり、ドキュメントオブジェクト (一部のブラウザではウィンドウ) です。

JQuery イベントのバブリングを停止するにはどうすればよいですか?
小さな例で説明します

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

 
 <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%> 
 
Porschev---Jquery イベントのバブリング 
 
クリックしてください

たとえば、上のページでは、
は 3 つの層に分割されています。divOne は外側の層、divTwo は中間の層、hr_three は最も内側の層です。
これらはすべてです。独自のクリックイベントがあり、最も内側の a タグにも href 属性があります。
ページを実行し、[クリックしてください] をクリックすると、次の順にポップアップ表示されます: 私は最も内側の層です--->私は中間層です--->私は最も外側の層です-- -->その後、Baidu にリンクします。
これはイベントバブリングです。最初は、ID hr_three のラベルをクリックしただけですが、実際に 3 つのアラート操作が実行されました。
イベントバブリングプロセス(タグIDで示される): hr_three---->divTwo---->divOne。最内層から最外層へ泡立ちます。

停止方法
1.event.stopPropagation();

コードをコピーしますコードは次のとおりです。

 
$(function(){ 
$("#hr_three").click (function(event){ 
event.stopPropagation(); 
}); 

 もう一度 [クリックしてください] をクリックします。私は最も内側のレイヤーで、Baidu にリンクします

2.returnfalse;
次のコードが先頭に追加された場合

コードをコピーしますコードは次のとおりです。

$(function() { 
$("#hr_three").click(function(event){ 
returnfalse; 
}); 🎜>もう一度 [クリックしてください] をクリックすると、ポップアップが表示されます: 私は最も内側の層ですが、Baidu ページへのリンクは実行しません 


 ここから 
 がわかります。 : 
1.event.stopPropagation(); 

イベントのバブリングを防ぎますが、デフォルトの動作はブロックしません (ハイパーリンクのジャンプは実行されます)
2.returnfalse; >イベント処理中に、イベントのバブリングを防ぎ、デフォルトの動作もブロックします (たとえば、今はハイパーリンクのジャンプが実行されませんでした)
バブリングに関連するものはもう 1 つあります:
3 .event.preventDefault(); ヘッダーAタグのクリックに入れる場合イベント内の「Click Me」をクリックします。 「私は最内層です」→「私は中間層です」→「私は最外層です」と次々と出てくるのですが、結局Baiduにはジャンプしません。
機能はい: イベント処理中、イベントのバブリングはブロックされませんが、デフォルトの動作はブロックされます (すべてのポップアップボックスのみが実行され、ハイパーリンクジャンプは実行されません)。

声明：

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

JQuery イベントのバブリングの概要とイベントのバブリングを防ぐ方法_jquery

関連記事