イベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?
イベントのバブリングが 2 回連続して発生するのはなぜですか?
イベント バブリングは Web 開発における重要な概念です。これは、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も内側の要素から最も外側の要素までバブルアップすることを意味します。このプロセスは時々混乱を引き起こす可能性があり、よくある問題の 1 つは、イベントのバブリングが 2 回続けて発生することです。
イベント バブリングが 2 回連続して発生する理由をより深く理解するために、まずコード例を見てみましょう:
<div id="outer">
<div id="inner">
<button id="button">Click me</button>
</div>
</div>
<script>
document.getElementById('button').addEventListener('click', function() {
console.log('Button clicked');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('Inner div clicked');
});
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
});
</script>上記のコードは、最も外側の ## を含むネストされた HTML 構造を作成します。 #
要素 (id="outer")、ネストされた >gt; 要素 (id="inner")、および Button 要素 (id="button")。 このコードでは、各要素のクリック イベント リスナーを追加して、対応する要素のクリックに関する情報を出力します。ページ上のボタンをクリックすると、予期される出力は次のようになります: Button clicked Inner div clicked Outer div clicked
Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clicked
要素までバブルアップして、要素のイベント ハンドラーの実行を継続します。ただし、 要素は最も外側の 要素にもネストされているため、イベントは再び最も外側の要素までバブルアップされ、その結果、最も外側のイベント ハンドラーが生成されます。関数が再度実行されます。 この問題を解決するには多くの方法があります。一般的に使用される 2 つの方法を紹介します: - イベントのバブリングを停止する:
イベント処理関数のevent.stopPropagation()メソッドを使用すると、イベントのさらなる伝播を防ぐことができます。つまり、イベントのバブリングを停止できます。上記のコード例のボタンのイベント ハンドラー関数を次のように変更します。
document.getElementById('button').addEventListener('click', function(event) {
console.log('Button clicked');
event.stopPropagation(); // 阻止事件冒泡
});event.stopPropagation() メソッドを使用した後、イベントのバブリングはボタン要素で停止し、ネストされた
要素と最も外側の 要素では、埋め込み要素には伝播されません。したがって、イベント処理関数は 1 回だけ実行され、出力結果は次のようになります。 Button clicked
- モニタリング キャプチャ フェーズ:
要素のイベント ハンドラー関数を次のように変更します。 document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
}, true); // 添加 true 参数表示监听捕获阶段
true を最も外側の要素 Event に追加します。リスナーはキャプチャフェーズ中にイベント処理関数を実行できます。このようにして、イベントのバブリング段階では、イベントによって最も外側の要素のイベント処理関数が再度トリガーされることがなくなり、繰り返しの実行が回避されます。
event.stopPropagation() メソッドを使用してイベントのバブリングを防ぐか、キャプチャ フェーズをリッスンしてイベントを処理して繰り返し実行を避けることができます。
以上がイベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホット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）
ホットトピック
7492
15
1377
52
77
11
19
41
Golang を使用して強力なデスクトップ アプリケーションを開発する
Mar 19, 2024 pm 05:45 PM
Golang を使用して強力なデスクトップ アプリケーションを開発する インターネットの継続的な発展に伴い、人々はさまざまな種類のデスクトップ アプリケーションから切り離すことができなくなりました。開発者にとって、強力なデスクトップ アプリケーションを開発するには効率的なプログラミング言語を使用することが重要です。この記事では、Golang (Go 言語) を使用して強力なデスクトップ アプリケーションを開発する方法を紹介し、いくつかの具体的なコード例を示します。 Golang は Google が開発したオープンソースのプログラミング言語で、シンプルさ、効率性、強力な同時実行性などの特徴があり、以下の用途に非常に適しています。
Lauiuiログインページでジャンプを設定する方法
Apr 04, 2024 am 03:12 AM
Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。
vueで画像にタッチイベントを追加する方法
May 02, 2024 pm 10:21 PM
Vueで画像にクリックイベントを追加するにはどうすればよいですか? Vue インスタンスをインポートします。 Vue インスタンスを作成します。 HTML テンプレートに画像を追加します。 v-on:click ディレクティブを使用してクリック イベントを追加します。 Vue インスタンスで handleClick メソッドを定義します。
Honmeng HarmonyOS と Go 言語の開発
Apr 08, 2024 pm 04:48 PM
HarmonyOS と Go 言語開発の概要 HarmonyOS は Huawei が開発した分散オペレーティング システムであり、Go は最新のプログラミング言語であり、この 2 つの組み合わせにより、分散アプリケーション開発のための強力なソリューションが提供されます。この記事ではHarmonyOSでの開発におけるGo言語の使い方を紹介し、実践事例を通して理解を深めていきます。インストールとセットアップ Go 言語を使用して HarmonyOS アプリケーションを開発するには、まず GoSDK と HarmonyOSSDK をインストールする必要があります。具体的な手順は次のとおりです。 #GoSDK のインストールgogetgithub.com/golang/go#Set PATH
PHP のヒント: 前のページに戻る関数をすばやく実装する
Mar 09, 2024 am 08:21 AM
PHP のヒント: 前のページに戻る機能をすばやく実装する Web 開発では、前のページに戻る機能を実装する必要があることがよくあります。このような操作により、ユーザー エクスペリエンスが向上し、Web ページ間の移動が容易になります。 PHP では、いくつかの簡単なコードを通じてこの機能を実現できます。この記事では、前のページに戻る機能を素早く実装する方法と、具体的な PHP コード例を紹介します。 PHP では、$_SERVER['HTTP_REFERER'] を使用して前のページの URL を取得できます。
同時プログラミングにおける C++ 関数のイベント駆動メカニズムとは何ですか?
Apr 26, 2024 pm 02:15 PM
並行プログラミングのイベント駆動メカニズムは、イベントの発生時にコールバック関数を実行することによって外部イベントに応答します。 C++ では、イベント駆動メカニズムは関数ポインターを使用して実装できます。関数ポインターは、イベントの発生時に実行されるコールバック関数を登録できます。ラムダ式ではイベント コールバックを実装することもでき、匿名関数オブジェクトの作成が可能になります。実際のケースでは、関数ポインタを使用して GUI ボタンのクリック イベントを実装し、イベントの発生時にコールバック関数を呼び出してメッセージを出力します。
Webページ要素を取得するJavaScriptの詳細説明
Apr 09, 2024 pm 12:45 PM
回答: JavaScript には、ID、タグ名、クラス名、CSS セレクターの使用など、Web ページ要素を取得するためのさまざまな方法が用意されています。詳細説明: getElementById(id): 一意の ID に基づいて要素を取得します。 getElementsByTagName(tag): 指定されたタグ名の要素グループを取得します。 getElementsByClassName(class): 指定されたクラス名の要素グループを取得します。 querySelector(selector): CSS セレクターを使用して、最初に一致した要素を取得します。 querySelectorAll(selector): CSS セレクターを使用して一致するものをすべて取得します
jsのクリックイベントが繰り返し実行できない理由
May 07, 2024 pm 06:36 PM
JavaScript のクリック イベントは、イベント バブリング メカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。 イベント キャプチャを使用する: イベントがバブルアップする前に起動するイベント リスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベント リスナーを再度トリガーします。
