ホームページ > ウェブフロントエンド > jsチュートリアル > 子アンカーのクリックが親のクリックイベントをトリガーしないようにするにはどうすればよいですか?

子アンカーのクリックが親のクリックイベントをトリガーしないようにするにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-14 18:39:09
オリジナル
703 人が閲覧しました

How to Prevent Child Anchor Clicks from Triggering Parent Click Events?

子アンカーのクリック イベントが親のクリック イベントをトリガーしないようにする

コードが示すように、子アンカー要素が親 div 内でクリックされると、 onclick イベントでは、両方のイベントが発生します。この問題を解決し、親クリック イベントが実行されないようにするには、次の 2 つのオプションがあります。

オプション 1: イベントの起源を確認する

jQuery によって渡されたeventargs オブジェクトを調べることによってをクリックすると、クリックを開始した要素を特定できます:

$("#clickable").click(function(e) {
    if($(e.target).is("div")) {
        window.location = url;
        return true;
    }
});
ログイン後にコピー

sender 要素が div 自体ではない場合、 div の onclick ハンドラーはトリガーされません。

オプション 2: イベントのバブリングを停止する

または、子アンカーの stopPropagation() メソッド:

$("#clickable a").click(function(e) {
    // Custom anchor handler
    e.stopPropagation();
});
ログイン後にコピー

このメソッドは、イベントが親 div に伝播されるのを防ぎ、アンカー クリック イベントのみが確実に発生するようにします。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート