☰

イベントバブリングをマスターする 質問する

tag-icon • tag-icon javascript jquery events event-bubbling
イベントバブリングをマスターする 質問する

このような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/

ベストアンサー1

イベントがバブルアップするのを防ぐ別の方法は、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");
});​

おすすめ記事