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。我目前在单击时处理单击的解决方案#containerthisevent.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 回答