22

假设我们有一个这样的 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/

4

3 回答 3

2

防止事件冒泡的另一种方法是使用 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");
});​
于 2012-09-21T01:16:30.153 回答
0

我不确定哪个工作更快，但下一个代码会更好是有道理的：

$("#container").click(function (e) {
    if (e.target.id && e.target.id !== "container") return false;
});
于 2012-09-20T13:55:33.917 回答
0

替代解决方案：

$("#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;
于 2012-09-17T12:40:57.070 回答