假设我们有这样的 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 来实现“开箱即用”的相同结果?
最佳答案
防止事件冒泡的另一种方法是使用 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");
});
关于javascript - 掌握事件冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12458980/