JavaScriptイベントバブリング応用例 分析_JavaScriptスキル

ただし、大規模な WebGame プロジェクトなど、今日の大規模な WEB インタラクティブ プロジェクトの一部では、JavaScript イベントのバブリングの影響が注目に値します。この記事では、JavaScriptのイベントバブリングと使用上の注意点を簡単な例を用いて説明します。

JavaScript イベントバブルについて印象が無い場合は、以前に書いたブログ「JavaScript イベントバブルの紹介と応用」を読んでみてください。この記事は実践的なものであり、JavaScript イベント バブリングの基本知識についてはあまり詳しく説明しません。

記事を始める前に、次の要件を見てみましょう: 次の HTML は、WebGame プロジェクトのパッケージ バーの外枠を記述していることを前提としています (オンライン ゲームをプレイしたことがある人は、パッケージ バーやインベントリバーは） 、パッケージタイトルバーをドラッグしてページ上の任意の位置にパッケージをドラッグし、タイトルバーの右側にある「×」閉じるボタンをクリックしてパッケージバーの表示を閉じます。 HTML 構造を観察すると、閉じるボタンは実際には A リンクであり、タイトル バー H5 の子要素として存在することがわかります。要素をドラッグするには、ドラッグ ハンドル要素にマウスダウン イベントを登録し、閉じるボタンをクリックまたは「クリック」してパッケージを閉じることを考えます。この要件に基づいて、すぐに次のコードが得られました。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript イベントのバブリング例 1</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> <div id="box"> <h5 id="a-onclick-closeBox-href-javascript-void-a"><a onclick="closeBox();" href="javascript:void(0);">×</a></h5> <div id="testInfo"></div> </div>
[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() を直接使用します。コード例は次のとおりです。

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

×

コードをコピー

コードは次のとおりです:

>

×

コードは次のとおりです:

ハンドル: function(event) { //その他のコード.... if (ret === false) {

event.preventDefault();

event.stopPropagation(); }
//その他のコード....
}


作成者: WebFlash