30

内部にリンクを含む div があります。

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

をクリックすると<div />どこかに移動するはずですが、子供をクリックする<a />と www.lol.com に移動するはずです。以前の質問とjQuery Web サイトから、.stopPropagation が上向きのバブルを防止することを見てきましたが、下向きのバブルを防ぐにはどうすればよいですか (ここで必要なことではありませんか?)。

4

2 に答える 2

47

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

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

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

リンクのクリックのみを防止したい場合は、div要素のイベント ハンドラーを変更できます。

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );
于 2010-04-28T09:45:25.683 に答える
3

問題は、アンカーをクリックしても<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 として.expandable-panel-heading クラスを持つ要素がないため、これは不要でした#ancherComplaint。

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

于 2013-10-29T11:26:29.493 に答える