Jsバブリングイベント防止コード_JavaScriptスキル-jsチュートリアル-php.cn

1. イベントターゲット

これで、イベントハンドラー内の変数eventがイベントオブジェクトを保持します。 event.target 属性には、イベントが発生したターゲット要素が格納されます。この属性は DOM API で指定されていますが、すべてのブラウザーで実装されているわけではありません。 jQuery は、このプロパティをどのブラウザでも使用できるように、このイベントオブジェクトに必要な拡張を作成します。 .target を使用すると、最初にイベントを受信した DOM 内の要素 (つまり、実際にクリックされた要素) を特定できます。さらに、これがイベントを処理する DOM 要素を参照していることがわかっているので、次のコードを記述できます:

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

$(document).ready(function(){
 $('#switcher').click(function(event){
 $(' #switcher .button').toggleClass('hidden');
 })
 })

$(document).ready(function(){
 $('#switcher' ).click(function(event ){
 if(event.target==this){
 $('#switcher .button').toggleClass('hidden');
 }
 } )
 })
 

この時点のコードでは、クリックされた要素が

であることが保証され、他の子孫要素ではありません。ボタンをクリックしてもスタイルコンバーターは折りたたまれなくなりましたが、境界線をクリックすると折りたたみアクションがトリガーされます。ただし、ラベルも子孫要素であるため、ラベルをクリックしても何も起こりません。実際、ここにチェックコードを置くのではなく、ボタンの動作を変更することで目的を達成できます。

2. イベントの伝播を停止します

イベントオブジェクトは、イベントのバブリングを完全に防ぐことができる .stopPropagation() メソッドも提供します。 .target と同様、このメソッドは純粋な JavaScript 機能ですが、クロスブラウザー環境では安全に使用できません。ただし、すべてのイベントハンドラーを jQuery 経由で登録している限り、このメソッドを安全に使用できます。
次に、先ほど追加した check ステートメントevent.target == を削除し、ボタンのクリックハンドラーにコードを追加します。

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

$(document).ready(function( ){
 $('#switcher .button').click(function(event){
 //……
event.stopPropagation();
 })
 }) 

前と同様に、イベントオブジェクトにアクセスするには、クリックハンドラーとして使用される関数にパラメーターを追加する必要があります。その後、event.stopPropagation() を呼び出すだけで、他のすべての DOM 要素がこのイベントに応答するのを防ぐことができます。このようにして、ボタンのクリックイベントはボタンによって処理され、ボタンのみが処理されます。スタイルコンバーターの他の場所をクリックすると、領域全体が折りたたまれて展開されます。

3. デフォルトの動作

クリックイベントハンドラーを外側の

ではなくアンカー要素に登録すると、別の問題に直面する必要があります。ユーザーがリンクをクリックすると、ブラウザーは新しいページを読み込むことになります。この動作は、アンカー要素をクリックするためのデフォルトのアクションである、前述したイベントハンドラーと同じ概念ではありません。同様に、ユーザーがフォームの編集後に Enter キーを押すと、フォームの送信イベントがトリガーされ、このイベントが発生した後、フォームの送信が実際に行われます。
このデフォルトのアクションを実行したくない場合、イベントオブジェクトの .stopPropagation() メソッドを呼び出しても役に立ちません。デフォルトのアクションは通常のイベント伝播フローでは発生しないためです。この場合、.preventDefault() メソッドは、デフォルトのアクションをトリガーする前にイベントを終了できます。
ヒント .preventDefault() は通常、イベントのコンテキストで何らかの検証が完了した後に使用されます。たとえば、フォームの送信中に、ユーザーが必須フィールドに入力したかどうかを確認し、ユーザーが対応するフィールドに入力しない場合は、デフォルトのアクションを防ぐ必要があります。フォームの検証については第 8 章で詳しく説明します。
イベントの伝播とデフォルトの操作は 2 つの独立したメカニズムであり、どちらかが発生すると、もう一方が終了する可能性があります。イベントの伝播とデフォルトのアクションの両方を停止したい場合は、イベントハンドラーで false を返すことができます。これは、イベントオブジェクトの .stopPropagation() と .preventDefault() の両方を呼び出す短縮方法です。

補足:

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

//クリックボタンイベント (テキストスタイルの変更)
$(document).ready(function() {
$('#switcher .button').click(function() {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}

$(' #スイッチャー .button').removeClass('selected');
$(this).addClass('selected');
});
});

// ボタンの外側の div をクリックしてイベントをトリガーします (隠しボタン)
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});

問題は、ボタンがをクリックすると、同時に隠しボタンイベントがトリガーされます。これはイベントのバブリングが原因で発生します。
イベントのバブリングを防ぐには、隠しボタン関数にパラメータを追加する必要があります:

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

$(document).ready(function() {
 $('#switcher').click(function(even) {
 if( Even.target==this){
 $('#switcher .button').toggleClass('hidden');
 }
 });
});

イベントオブジェクトも保存します。target 属性には、イベントが発生したターゲット要素が保持されます。 DOM 内のどの要素が最初にイベントを受信したかを判断できます。この時点で、コードは、その子孫要素ではなく

がクリックされることを確認します。

これは、目的を達成するためにボタンの動作を変更することによっても行うことができます。

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

$(document).ready(function( ) {
 $('#switcher .button').click(function(even) {
 $('body').removeClass();
 if (this.id == 'switcher-narrow ') { 
 $('body').addClass('narrow');
 }
 else if (this.id == 'switcher-large') {
 $('body' ).addClass ('large');
 }

 $('#switcher .button').removeClass('selected');
 $(this).addClass('selected') ;
 Even.stopPropagation();
 });
});

JS によるイベントのバブリングを防ぐ

イベントバブリング: マウスによるボタンのクリックなど、要素上でイベントがトリガーされると、その要素のすべての祖先要素で同じイベントがトリガーされます。このプロセスはイベントバブリングと呼ばれます。イベントは元の要素から DOM ツリーの最上位までバブルアップします。
JS を使用すると、JS イベントのバブリングを防ぐことができます。ブラウザの違いにより、IEとFFではJSの記述方法が若干異なります。
IE はこれを防ぐために cancelBubble=true を使用しますが、FF は stopPropagation メソッドを使用する必要があります。
次の完全なコード:

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

无标题文档

点击aaaa会触发上层的onclick事件，点击bbbb不会触发上层onclick事件


aaaa	bbbbb