コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

ホームページ > ウェブフロントエンド > jsチュートリアル > ネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベントハンドラーが実行されないようにするにはどうすればよいですか?

ネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベントハンドラーが実行されないようにするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-24 08:45:11

オリジナル

321 人が閲覧しました

How to Prevent Parent Event Handlers from Executing When a Child Event is Triggered in Nested DOM Objects?

ネストされた DOM オブジェクトでのイベントの進行を維持する

イベントハンドラーが複数のレベルで定義されているネストされた DOM 構造では、多くの場合、イベントの進行を防ぐことが望ましいです。子イベントがトリガーされたときの親イベントハンドラーの実行。次の例を考えてみましょう:

<div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

ログイン後にコピー

この構造では、クリック任意の div 要素で「func」関数を呼び出します。ただし、問題があります。「b」または「c」をクリックすると、クリックされた div とその親 div である「a」の両方に対して「func」関数がトリガーされます。

解決策: イベント伝播制御

jQuery は、DOM ツリーへのイベントの伝播を防ぐメソッドを提供します。イベントハンドラーを定義する前に次のコードを追加すると:

$('#a').add('#b').click(function(event) {
    event.stopPropagation();
});

ログイン後にコピー

「b」または「c」をクリックしてもイベントがその親である「a」に伝播されないようにすることができます。これにより、クリックされた子 div の関数のみが実行されるようになります。

イベントの伝播を制御することで、ネストされた DOM 構造内で必要なイベントフローを維持し、意図しない関数の実行を防ぐことができます。

以上がネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベントハンドラーが実行されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

ネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベント ハンドラーが実行されないようにするにはどうすればよいですか?