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

ネストされたクリック イベントのイベント バブリングについて

両方にクリック イベント リスナーがある親要素内の要素をクリックすると、両方のイベントがトリガーされることがあります。イベント バブリングとして知られるこの動作は、親要素のイベントを同時に発生させたくない場合に、望ましくない結果を引き起こす可能性があります。

特定のシナリオでは、アンカーを含むクリック可能な div でこの問題が発生します。タグ。これを解決するには、次の 2 つのアプローチを検討してみましょう。

1.発信元イベントのターゲット識別

アンカーがクリックされたときに親 div のクリック イベントが発生しないようにするには、イベント自体の発信元を確認します。 jQuery は、イベント ハンドラーに渡されるイベント引数内で e.target プロパティを提供します。

$("#clickable").click(function(e) {
    var senderElement = e.target;
    if($(senderElement).is("div")) {
        window.location = url;
        return true;
    }
});

このアプローチでは、セレクターに基づいてイベントが div 要素から発生したかどうかを検証します。 div でない場合、window.location 変更イベントはトリガーされません。

2.イベント伝播の停止

または、クリック イベント ハンドラー内で e.stopPropagation() メソッドを使用して、アンカーのクリック イベントのバブリングを防ぐことができます。

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

このアプローチでは、アンカーのクリック イベントは、イベントを親要素に伝播せずに独自のロジックを実行し、div のクリック イベントが影響を受けるのを効果的に防ぎます。発砲中

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