web-dev-qa-db-ja.com

jQuery stopPropagationバブルダウン

内部にリンクがあるdivがあります：

<div id="myDiv">
    <a href="http://www.lol.com">Lol</a>
</div>

<div />はどこかに行く必要がありますが、子をクリックすると<a />はwww.lol.comにアクセスする必要があります。 前の質問 と jQuery Webサイト から、.stopPropagationが上方へのバブリングを防止することを確認しました。 。

jqueryevent-bubbling
30
atp

イベントは泡立つだけです。したがって、a要素のクリックイベントハンドラーは、divのクリックイベントハンドラーの前に発生します。説明する動作が必要な場合は、divへの伝播を停止するa要素にクリックイベントハンドラーを追加する必要があります。

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

そして、divにあるすべてのイベントハンドラーを保持します。これにより、イベントがデフォルトのアクションを実行できるようになり、divのハンドラーが起動されなくなります。

リンクのクリックを防ぐだけの場合は、div要素のイベントハンドラーを変更できます。

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );
45
Geoff

問題は、アンカーをクリックしても_<div>_でクリックがトリガーされることでした。それは「イベントバブリング」と呼ばれます。

実際、複数のソリューションがあります。

DIVクリックイベントハンドラーで、実際のターゲット要素がアンカーであるかどうかをチェックします →jsFiddle

_$('#myDiv').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});
_

アンカークリックリスナーからのイベント伝播の停止 →jsFiddle

_$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});
_

お気づきの方もいらっしゃるかと思いますが、以下のセレクタ部分をサンプルから削除しました。

_:not(#ancherComplaint)
_

IDとして_#ancherComplaint_も持つ.expandable-panel-headingクラスの要素がないため、これは不要でした。

アンカーのイベントを抑制したいと思います。両方のセレクター（自分のものと自分のもの）がまったく同じDIVを選択するため、この方法では機能しません。セレクターは、呼び出されてもリスナーに影響を与えません。リスナーを登録する要素のリストを設定するだけです。このリストは両方のバージョンで同じであるため、違いはありません。

3
Vijay