ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery でイベントの伝播を停止して、親イベント ハンドラーが起動しないようにするにはどうすればよいですか?

jQuery でイベントの伝播を停止して、親イベント ハンドラーが起動しないようにするにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-12 11:46:01
オリジナル
847 人が閲覧しました

How to Stop Event Propagation in jQuery to Prevent Parent Event Handlers from Firing?

親イベント ハンドラーの伝播の防止

親 div をクリックすると、その子が非表示になる div のツリー構造を考えてみましょう。ただし、子 div をクリックすると、親のクリック イベントもトリガーされます。この問題に対処するには、ツリーへのイベントの伝播を防ぐ方法が必要です。

jQuery を使用した効果的なアプローチの 1 つは、イベントの伝播を明確に停止するクリック ハンドラーを子要素に追加することです。

function handler(event) {
    event.stopPropagation();
    // additional code here
}

$('#a').add('#b').click(handler);
ログイン後にコピー

このコードでは、stopPropagation() メソッドを使用して、イベントが親 div にバブリングするのを防ぎます。 div '#b' でクリックが発生すると、ハンドラー関数が呼び出され、イベントが div '#a' に到達するのを防ぎます。その結果、親のクリック イベントはトリガーされず、div '#c' の可視性が維持されます。

以上がjQuery でイベントの伝播を停止して、親イベント ハンドラーが起動しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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