Jsバブリングイベント防止コード_JavaScriptスキル
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. デフォルトの動作
クリック イベント ハンドラーを外側の
このデフォルトのアクションを実行したくない場合、イベント オブジェクトの .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 |
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7651
15
1392
52
91
11
37
110
イベントのバブリング メカニズムを理解する: 子要素をクリックすると親要素のイベントに影響を与えるのはなぜですか?
Jan 13, 2024 pm 02:55 PM
イベントバブリングについて: 子要素をクリックすると親要素のイベントがトリガーされるのはなぜですか?イベントバブリングとは、入れ子になった要素構造において、子要素がイベントをトリガーすると、そのイベントがバブリングのように層ごとに親要素の層に最外層の親要素まで渡されることを意味します。このメカニズムにより、子要素のイベントが要素ツリー全体に伝播され、関連するすべての要素が順番にトリガーされます。イベントバブリングをより深く理解するために、具体的なコード例を見てみましょう。 HTML コード: <divid="parent&q"
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 回トリガーされるイベントに遭遇することがあります。
jsのクリックイベントが繰り返し実行できない理由
May 07, 2024 pm 06:36 PM
JavaScript のクリック イベントは、イベント バブリング メカニズムのため、繰り返し実行できません。この問題を解決するには、次の措置を講じることができます。 イベント キャプチャを使用する: イベントがバブルアップする前に起動するイベント リスナーを指定します。イベントの引き継ぎ: イベントのバブリングを停止するには、event.stopPropagation() を使用します。タイマーを使用します。しばらくしてからイベント リスナーを再度トリガーします。
vue のイベント修飾子はどのようなシナリオに使用できますか?
May 09, 2024 pm 02:33 PM
Vue.js イベント修飾子は、次のような特定の動作を追加するために使用されます。 デフォルト動作の防止 (.prevent) イベント バブリングの停止 (.stop) ワンタイム イベント (.once) イベントのキャプチャ (.capture) パッシブ イベント リスニング (.passive) アダプティブ修飾子 (.self)キー修飾子 (.key)
イベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?
Feb 25, 2024 am 09:24 AM
イベントのバブリングが 2 回連続して発生するのはなぜですか?イベント バブリングは Web 開発における重要な概念であり、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も内側の要素から最も外側の要素までバブルアップすることを意味します。このプロセスは時々混乱を引き起こす可能性があり、よくある問題の 1 つは、イベントのバブリングが 2 回続けて発生することです。イベント バブリングが 2 回連続して発生する理由をよりよく理解するために、まずコード例を見てみましょう。
バブルアップしない JS イベントはどれですか?
Feb 19, 2024 pm 09:56 PM
JS イベントでバブルが発生しない状況にはどのようなものがありますか?イベントバブリング(Event Bubble)とは、要素上でイベントが発生した後、最も内側の要素から最外側の要素に向かってDOMツリーに沿って上方向にイベントが送信されることを意味し、この送信方法をイベントバブリングと呼びます。ただし、すべてのイベントがバブル化できるわけではなく、イベントがバブル化しない特殊なケースもいくつかあります。この記事では、JavaScript でイベントがバブルアップしない状況を紹介します。 1. stopPropagati を使用する
バブリングイベントを防ぐ一般的な方法は何ですか?
Feb 19, 2024 pm 10:25 PM
バブリングイベントを防ぐために一般的に使用されるコマンドは何ですか? Web 開発では、イベントのバブリングを処理する必要がある状況によく遭遇します。クリック イベントなどのイベントが要素でトリガーされると、その親要素も同じイベントをトリガーします。イベント配信のこの動作は、イベント バブリングと呼ばれます。場合によっては、イベントがバブルアップするのを防ぎ、イベントが現在の要素でのみ発生し、上位の要素に渡されないようにしたい場合があります。これを実現するには、バブリング イベントを防ぐいくつかの一般的なディレクティブを使用できます。イベント.ストッププロパ
