ホームページ > 記事 > ウェブフロントエンド > ネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベント ハンドラーが実行されないようにするにはどうすればよいですか?
ネストされた DOM オブジェクトで子イベントがトリガーされたときに親イベント ハンドラーが実行されないようにするにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-11-24 08:45:11226ブラウズ
ネストされた DOM オブジェクトでのイベントの進行を維持する
イベント ハンドラーが複数のレベルで定義されているネストされた DOM 構造では、多くの場合、イベントの進行を防ぐことが望ましいです。子イベントがトリガーされたときの親イベント ハンドラーの実行。次の例を考えてみましょう:
<div><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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。