小さな例では、Jquery イベントによる bubble_jquery の発生を防ぐ方法を説明します。
JS イベントバブリングとは何ですか?
オブジェクトで特定のタイプのイベント (onclick イベントなど) をトリガーします。オブジェクトがこのイベントのハンドラーを定義している場合、このイベント ハンドラーが定義されていない場合、またはイベントが true を返した場合、このイベントはこのハンドラーを呼び出します。 、その後、このイベントは、処理されるまで (親オブジェクトの同様のイベントがすべてアクティブ化される)、またはオブジェクト階層の最上位レベルに到達するまで、このオブジェクトの親オブジェクトに内側から外側に伝播します。ドキュメント オブジェクト (一部のブラウザはウィンドウです)。
Jquery イベントのバブリングを停止するにはどうすればよいですか?
小さな例で説明します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Porschev---Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</form>
</body>
</html>
たとえば、上記のページ、
3 つのレイヤーに分かれています: divOne は外側のレイヤー、divTwo は中間のレイヤー、hr_three は最も内側のレイヤーです。
これらはすべて独自のクリック イベントを持ち、最も内側の a タグにも href 属性があります。
ページを実行し、[クリックしてください] をクリックすると、次の順にポップアップ表示されます: 私は最内層です---->私は中間層です---->私は最外層です
---->次に、Baidu にリンクします。
これはイベント バブリングです。当初は hr_three という ID のラベルをクリックしただけでしたが、3 つのアラート操作が実行されました。
イベント バブリング プロセス (タグ ID で表されます): hr_three----> divTwo----> divOne。最内層から最外層へ泡立ちます。
それを止めるにはどうすればよいですか?
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>2.return false;
ヘッダーに以下のコードを追加した場合
<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>
もう一度「クリックしてください」をクリックすると、ポップアップが表示されます: 私は最内層ですが、Baidu ページへのリンクは実行されません
それは次のことからわかります:
イベント処理中、イベントのバブリングは防止されますが、デフォルトの動作はブロックされません (ハイパーリンクのジャンプが実行されます)
2. false を返す;
バブリングに関連するものがもう 1 つあります:
ヘッダーAタグのクリックイベントに入れると「Click me」をクリックします。
「私は最内層です---->私は中間層です---->私は最外層です」という順に表示されますが、最終的には百度にジャンプしません
その機能は次のとおりです: イベント処理中、イベントのバブリングはブロックされませんが、デフォルトの動作はブロックされます (すべてのポップアップ ボックスのみが実行され、ハイパーリンク ジャンプは実行されません)
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7480
15
1377
52
77
11
19
33
イベントのバブリング メカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか?
Jan 13, 2024 pm 02:55 PM
イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"
イベントのバブリングが 2 回トリガーされるのはなぜですか?
Feb 22, 2024 am 09:06 AM
イベントのバブリングが 2 回トリガーされるのはなぜですか?イベント バブリング (イベント バブリング) とは、DOM において、要素がイベント (クリック イベントなど) をトリガーすると、イベントがその要素から親要素にバブルアップし、最後に最上位のドキュメント オブジェクトにバブルアップすることを意味します。イベント バブリングは DOM イベント モデルの一部であり、これにより開発者はイベント リスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリング メカニズムを通じてイベントをキャプチャして処理できます。ただし、開発者は、バブルして 2 回トリガーされるイベントに遭遇することがあります。
jsのクリックイベントが繰り返し実行できない理由
May 07, 2024 pm 06:36 PM
JavaScript のクリック イベントは、イベント バブリング メカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。 イベント キャプチャを使用する: イベントがバブルアップする前に起動するイベント リスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベント リスナーを再度トリガーします。
jQuery .val() が失敗する理由と解決策
Feb 20, 2024 am 09:06 AM
タイトル: jQuery.val() が失敗する理由と解決策 フロントエンド開発では DOM 要素の操作に jQuery がよく使われますが、フォーム要素の値の取得や設定には .val() メソッドが広く使われています。ただし、.val() メソッドが失敗し、フォーム要素の値を正しく取得または設定できない状況が発生することがあります。この記事では、.val() エラーの原因を調査し、対応する解決策を提供し、具体的なコード例を添付します。 1.原因分析.val()メソッド
vue のイベント修飾子はどのようなシナリオに使用できますか?
May 09, 2024 pm 02:33 PM
Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。 デフォルト動作の防止 (.prevent) イベント バブリングの停止 (.stop) ワンタイム イベント (.once) イベントのキャプチャ (.capture) パッシブ イベント リスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)
バブルアップしない JS イベントはどれですか?
Feb 19, 2024 pm 09:56 PM
JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する
イベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?
Feb 25, 2024 am 09:24 AM
イベントのバブリングが 2 回連続して発生するのはなぜですか?イベント バブリングは Web 開発における重要な概念であり、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も内側の要素から最も外側の要素までバブルアップすることを意味します。このプロセスは時々混乱を引き起こす可能性があり、よくある問題の 1 つは、イベントのバブリングが 2 回続けて発生することです。イベント バブリングが 2 回連続して発生する理由をよりよく理解するために、まずコード例を見てみましょう。
イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析
Feb 20, 2024 pm 05:27 PM
イベントバブリングとは何ですか?イベント バブリング メカニズムの詳細な分析 イベント バブリングは Web 開発における重要な概念であり、ページ上でイベントを配信する方法を定義します。要素上のイベントがトリガーされると、イベントは最も内側の要素から送信され、最も外側の要素に渡されるまで外側に渡されます。この配信方法は水の中で泡が泡立っているようなものなので、イベントバブリングと呼ばれます。この記事では、イベントのバブリングのメカニズムを詳しく分析します。イベントバブリングの原理は、簡単な例を通して理解できます。 H があるとします。
