階層 HTML Div 内の子要素をクリックしたときに親イベント ハンドラーが起動しないようにするにはどうすればよいですか?

階層 HTML Div での親イベント ハンドラーの実行の防止

階層 HTML 要素を操作する場合、一般的な問題は子要素の可能性です。親要素でイベント ハンドラーをトリガーします。次のシナリオでは、div のツリーが作成され、それぞれにその子を非表示にする onclick イベントが含まれます:

<div>

問題は、子 div "b" の click イベントが、親 div "a" により、"b" とその子 "c" が非表示になります。これは、子要素の意図した機能を妨げるため、望ましくない動作です。

解決策:

このカスケード効果を防ぐには、jQuery の stopPropagation() を利用できます。子要素がクリックされたときに親イベント ハンドラーの実行を無効にするメソッド:

function handler(event) {
    event.stopPropagation();
    // Now do your stuff
}
$('#a').add('#b').click(handler);

このイベント ハンドラーを親 div "a" と子 div "b" の両方に追加することで、クリックが確実に行われるようにします。子「b」は DOM に伝播しなくなり、親イベント ハンドラーをトリガーします。その結果、「b」をクリックした後も「b」と「c」が表示されたままになります。

この手法により、階層構造内でのイベントの伝播を正確に制御できるため、開発者は階層構造内の個々の要素の動作をカスタマイズできます。複雑なインターフェース。

以上が階層 HTML Div 内の子要素をクリックしたときに親イベント ハンドラーが起動しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。