コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 17:45:41
オリジナル
890 人が閲覧しました
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にはジャンプしません。
機能 はい: イベント処理中、イベントのバブリングはブロックされませんが、デフォルトの動作はブロックされます (すべてのポップアップ ボックスのみが実行され、ハイパーリンク ジャンプは実行されません)。
関連ラベル：
jQueryイベント イベントバブリング
ソース：php.cn
前の記事：jsで派手な回転と回転後にゆっくり開くウィンドウ特殊効果を実現_その他の特殊効果 次の記事：ajax_javascript スキルの説明、使用法、get と post の違い
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
ASP クラシック コードを文字列として MYSQL データベースに保存する可能性 ASP クラシック コードを MySQL データベースに保存し、プルされたときにコードを実行させることは可能ですか?たとえば、変数名を文字列に保存し、それを表示する前に ASP を...
から 2024-04-06 13:38:43
0
1
358
NumberInput マウス ホイール処理はキャプチャ フェーズ イベント フィルタリングを無視します 非常に短いバージョン: ちょっと行き詰まっていて、なぜこのコードが実際にマウスホイールイベントをインターセプトして、数値エディターが数値を変更するために解釈するのを妨げるのかよくわ...
から 2024-04-05 12:21:04
0
1
1387
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート