掌握事件冒泡

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，该听众也会触发。当点击#container时，仅处理点击的当前解决方案是将this与event.target进行比较

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

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

行动中的示例：http://jsfiddle.net/FKX7p/

Answer 1

替代解决方案：

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