javascript - 掌握事件冒泡

Question

假设我们有这样的 HTML 结构

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

...我们的目标是在 #container 上有一个事件监听器仅!因此，我们绑定(bind)一个监听器(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

防止事件冒泡的另一种方法是使用 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");
});​