22

このようなHTML構造があるとしましょう

<div id="container">
    <div id="nested">
        <span id="someElement"></span>
    </div>
</div>

...そして私たちの目標は、#container 唯一のイベントリスナーを持つことです! そのため、リスナー (jQuery コード) をバインドします。

$("#container").on('click', function(event) {
    alert("container was clicked");
});

それはもちろん機能しますが、このアプローチの問題点は、イベントは通常バブルアップするため、実際に#nestedまたはをクリックすると、そのリスナーも起動すること#someElementです。クリックされたときにのみクリックを処理する私の現在の解決策#containerは、と比較thisすることですevent.target

$("#container").on('click', function(event) {
    if(this === event.target) {
        alert("container was clicked");
    }
});

私の質問: それは「ベスト プラクティス」と見なされますか? 「箱から出して」同じ結果を達成するためのjQueryのより良い方法はありますか?

実際の例: http://jsfiddle.net/FKX7p/

4

3 に答える 3

2

イベントがバブルアップするのを防ぐ別の方法は、event.stopPropagation(); を使用することです。

$("#container").on('click', function(event) {
    alert("container was clicked");
})
.children().on('click', function(event) {
    event.stopPropagation();
});

このアプローチを使用する利点は、ネストされた div に別のイベントをアタッチしたい場合は、単に使用できることだと思います

$("#nested").on('click', function(event) {
    event.stopPropagation();
    // some action
});

$("#container").on('click', function(event) {
    alert("container was clicked");
});​
于 2012-09-21T01:16:30.153 に答える
0

代替ソリューション:

$("#container").click(function(){
    alert("container was clicked");
}).children().click(function(e) {
    return false;
});

しかし、あなたの解決策はより良いです。jsfiddle.net/FKX7p/2/ (false を返す) またはjsfiddle.net/FKX7p/3/ (stopPropagation を使用)

私はあなたの例で return を使用することを好みます (コードが読みやすくなります):

if(this !== event.target) return;
于 2012-09-17T12:40:57.070 に答える
0

どちらがより高速に機能するかはわかりませんが、次のコードの方が優れていることは理にかなっています。

$("#container").click(function (e) {
    if (e.target.id && e.target.id !== "container") return false;
});
于 2012-09-20T13:55:33.917 に答える