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

子アンカーのクリックによる親イベントのトリガーの防止

Web プログラミングでは、多くの場合、クリック可能な要素を他のクリック可能な要素内にネストする必要があります。ただし、クリック可能な親要素内でアンカー要素 (「a」タグ) をクリックすると、両方のクリック イベントが発生し、望ましくない動作が発生する可能性があります。

問題の定義:

目標は、アンカーの子がクリックされたときに親要素の onclick イベントがトリガーされないようにすることです。これにより、アンカーの意図したアクションのみが確実に実行されます。

解決策 1: イベントの起源を確認する

jQuery は、イベントの起源に関する情報を含む 'eventargs' オブジェクトを提供します。親要素の onclick ハンドラー内のeventargs をチェックすることで、クリックがアンカーから発生したかどうかを判断できます。

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

このコードでは、イベントのターゲットが「div」要素であるかどうかを確認します。その場合、親のアクション (特定の URL へのリダイレクト) をトリガーします。

解決策 2: イベント バブリングの停止

イベント バブリングとは、イベントのバブリングを指します。 DOM ツリー。アンカーにクリック ハンドラーを追加し、その中で 'e.stopPropagation()' を呼び出すことで、イベントが親要素にバブルアップするのを防ぐことができます。

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

このアプローチでは、イベントの続行が即座に停止されます。 DOM 内での上向きの移動を実行し、アンカーのアクションのみが実行されるようにします。

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