0

クリック アクションを含むいくつかの div と、最初の内部に別の div があります。右上隅の「close-cross」で最初の div を閉じるか、他の場所を閉じます。

問題は、close-cross div をクリックすると、メインの div クリック アクションも呼び出されることです。理論的には、マウス ボタンが押され、マウス ポインターが両方の div の上にあったため、両方がクリックされますが、直接クリックされた div のみがそのクリック イベントを呼び出すようにします。

4

4 に答える 4

1

イベント バブリングと呼ばれるもので、これを使用して確認できます。 

$(document).ready(function() {
$('#main').click(function(event) {
if (event.target == this) {
//Your code here
}
});
});

イベントのevent.stopPropagation();ストップジャーニー

$(document).ready(function() {
    $('#close-cross').click(function(event) {

    //Your code here
   event.stopPropagation();
    });
    });
于 2012-10-02T15:51:54.527 に答える
1

メソッドを使用したいevent.stopPropagation()。これにより、イベントが DOM ツリーにバブリングするのを防ぎます。jQueryのドキュメントはこちら

于 2012-10-02T15:49:43.750 に答える
1

close 関数では、event.stopPropagation() を呼び出す必要があります。

http://api.jquery.com/event.stopPropagation/

これにより、イベントが親 div にバブリングするのを防ぎます。イベントバブリングの詳細:

イベントのバブリングとキャプチャとは何ですか?

于 2012-10-02T15:49:44.667 に答える
0

このフィドルをチェック

$(document).ready(function() {
     // Outer Div click Event
    $('div.a').on('click', function(e) {
        if (e.target.className === 'b') {
            e.preventDefault();
        }
        else {
            alert('Outer Div Clicked !!');

        }
    });

    // Inner Div Click event
    $('div.b').on('click', function(e) {
        alert('Inner Div Clicked !!');
    });
});​
于 2012-10-02T15:53:45.017 に答える