JavaScriptイベントバブリング応用例 分析_JavaScriptスキル
ただし、大規模な WebGame プロジェクトなど、今日の大規模な WEB インタラクティブ プロジェクトの一部では、JavaScript イベントのバブリングの影響が注目に値します。この記事では、JavaScriptのイベントバブリングと使用上の注意点を簡単な例を用いて説明します。
JavaScript イベントバブルについて印象が無い場合は、以前に書いたブログ「JavaScript イベントバブルの紹介と応用」を読んでみてください。この記事は実践的なものであり、JavaScript イベント バブリングの基本知識についてはあまり詳しく説明しません。
記事を始める前に、次の要件を見てみましょう: 次の HTML は、WebGame プロジェクトのパッケージ バーの外枠を記述していることを前提としています (オンライン ゲームをプレイしたことがある人は、パッケージ バーやインベントリバーは） 、パッケージタイトルバーをドラッグしてページ上の任意の位置にパッケージをドラッグし、タイトルバーの右側にある「×」閉じるボタンをクリックしてパッケージバーの表示を閉じます。 HTML 構造を観察すると、閉じるボタンは実際には A リンクであり、タイトル バー H5 の子要素として存在することがわかります。要素をドラッグするには、ドラッグ ハンドル要素にマウスダウン イベントを登録し、閉じるボタンをクリックまたは「クリック」してパッケージを閉じることを考えます。この要件に基づいて、すぐに次のコードが得られました。 
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
上の例では、閉じるボタンをクリックすると、タイトル バーのマウスダウン イベントもトリガーされることがわかります。これは、JavaScript イベントのバブリングが機能していることがわかっているためです。実は、本当に欲しい効果は、タイトル H5 に登録されているマウスダウンイベントを閉じるボタンをクリックしたときに実行しないことなので、イベントが湧き出ないようにすることを考え、コードを次のように修正しました。
×
その結果、閉じるボタンをクリックすると、タイトル H5 で登録されたマウスダウン イベントが引き続き実行されることがわかります。何が起こっているのでしょうか?実際、注意してみると、H5 タイトルと A リンクで登録されたイベントが同じではないことがわかります。上記のコードでは、A リンクで登録されたクリック イベントのブロック イベント メソッドを呼び出しています。これは、「親要素によって登録された同様のイベント「イベント」が実行されないことを意味します。つまり、H5 タイトルにもクリック イベントが登録されている場合、クリック イベントは実行されず、ここでのマウスダウンは実行され続けます。 。ここでのマウスダウンの実行は、タイトル バーをクリックしたために発生するのではなく、クリックしたときにマウスダウン イベントが生成されるためです。その後、JavaScript イベント バブリング メカニズムの存在により、イベントが親にブロードキャストされ、マウスダウンされます。 H5 タイトルのキャプチャ。この点の理解については、私の別のブログ「onmousedown、onmouseup、onclick を同じラベル ノード要素に同時に適用した場合」を参照してください。分析を通じて、上記のコードに少し変更を加えるだけで、A リンクのクリック イベントを H5 タイトルと同じマウスダウン イベントに変更するだけで、目的の効果が得られることがわかります。
関連トピック:
ここで、jQuery を使用した開発時にイベントのバブリングを簡単に防ぐ方法について説明します。優れたスクリプト フレームワークとして、jQuery はイベントのカプセル化とブラウザーの互換性において当然優れています。さらに詳しく知りたい場合は、私の別のブログ「jQuery の $.event.fix 関数を使用してブラウザ イベント処理を統合する」も参照してください。
jQuery を使用してイベントのバブリングを防ぐ方法は 2 つあります。
1. jQuery を使用して互換性のあるイベント オブジェクトを作成し、event.preventDefault() を直接使用します。コード例は次のとおりです。
×
×
ホット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）
ホットトピック
7370
15
1628
14
1355
52
1266
25
1215
29
イベントのバブリング メカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか?
Jan 13, 2024 pm 02:55 PM
イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"
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()メソッド
イベントのバブリングが 2 回トリガーされるのはなぜですか?
Feb 22, 2024 am 09:06 AM
イベントのバブリングが 2 回トリガーされるのはなぜですか?イベント バブリング (イベント バブリング) とは、DOM において、要素がイベント (クリック イベントなど) をトリガーすると、イベントがその要素から親要素にバブルアップし、最後に最上位のドキュメント オブジェクトにバブルアップすることを意味します。イベント バブリングは DOM イベント モデルの一部であり、これにより開発者はイベント リスナーを親要素にバインドできるため、子要素がイベントをトリガーすると、バブリング メカニズムを通じてイベントをキャプチャして処理できます。ただし、開発者は、バブルして 2 回トリガーされるイベントに遭遇することがあります。
vue のイベント修飾子はどのようなシナリオに使用できますか?
May 09, 2024 pm 02:33 PM
Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。 デフォルト動作の防止 (.prevent) イベント バブリングの停止 (.stop) ワンタイム イベント (.once) イベントのキャプチャ (.capture) パッシブ イベント リスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)
イベントバブリングとは何ですか?イベントバブリングメカニズムの詳細な分析
Feb 20, 2024 pm 05:27 PM
イベントバブリングとは何ですか?イベント バブリング メカニズムの詳細な分析 イベント バブリングは Web 開発における重要な概念であり、ページ上でイベントを配信する方法を定義します。要素上のイベントがトリガーされると、イベントは最も内側の要素から送信され、最も外側の要素に渡されるまで外側に渡されます。この配信方法は水の中で泡が泡立っているようなものなので、イベントバブリングと呼ばれます。この記事では、イベントのバブリングのメカニズムを詳しく分析します。イベントバブリングの原理は、簡単な例を通して理解できます。 H があるとします。
バブルアップしない JS イベントはどれですか?
Feb 19, 2024 pm 09:56 PM
JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する
バブルアップしない JS イベントは何ですか?
Feb 18, 2024 pm 06:31 PM
バブルアップしない JS イベントは何ですか? JavaScript は、Web ページに対話性とダイナミクスを追加する強力なスクリプト言語です。 JavaScript では、イベント駆動型プログラミングは非常に重要な部分です。イベントとは、ボタンのクリック、マウスの動き、キーボード入力など、Web ページ上でユーザーが実行するさまざまな操作を指します。 JavaScript は、イベント処理関数を通じてこれらのイベントに応答し、対応する操作を実行します。イベント バブリングは、イベント処理中の一般的なメカニズムです。イベントのバブリングとは、
