掌握事件冒泡

Question

假设我们有这样的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 ，那个听众也会#someElement 。 我当前只在单击#container时处理点击的解决方案是将this与event.target进行比较

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

我的问题：这被认为是“最佳做法”吗？ 是否有更好的方法使用jQuery来“开箱即用”地完成相同的结果？

行动示例： http ： //jsfiddle.net/FKX7p/

Answer 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");
});​

Answer 2

替代方案：

$("#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;

Answer 3

我不确定哪一个工作更快，但下一个代码会更好有意义：

$("#container").click(function (e) {
    if (e.target.id && e.target.id !== "container") return false;
});