掌握事件冒泡

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;