子アンカーがクリックされたときに親のクリックイベントが発生しないようにするにはどうすればよいですか?

子アンカーがクリックされたときの親のクリック イベントの防止

親要素とその子内にクリック可能な要素を組み込む場合、親と子の両方がクリック イベントは同時にトリガーされます。この動作は、DOM 内のイベントのバブリングの性質により発生します。

このような場合に親のクリック イベントが発生しないようにするには、いくつかの解決策を使用できます。

イベント オリジンの確認

親のクリック イベント ハンドラーで e.target プロパティを利用すると、イベントをトリガーする実際の要素を識別できます。 e.target を親要素と比較することで、クリックが親要素から発生したのか、それとも親要素内の他の場所から発生したのかを判断できます。

イベント伝播の停止

または、クリック イベント ハンドラーを子アンカーを設定し、その中で e.stopPropagation() を呼び出すと、イベントが親にバブルアップするのを防ぎます。この方法では、子アンカーがクリックされても親のクリック イベントはトリガーされません。

コード例:

$("#clickable").click(function(e) {
    if ($(e.target).is("div")) {  // Check if the event originated from the <div>
        window.location = url;
        return true;
    }
});

$("#clickable a").click(function(e) {
    // Do something specific to the anchor
    e.stopPropagation();
});

これらのメソッドのいずれかを適用すると、ターゲット要素に基づいてクリック イベントを選択的に処理できるようになり、親のクリック イベントが意図したターゲットである場合にのみ発生することが保証されます。

以上が子アンカーがクリックされたときに親のクリックイベントが発生しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。