假设我们有这样的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 ,那个听众也会#someElement 我当前在单击#container时处理点击的解决方案是将thisevent.target进行比较

$("#container").on('click', function(event) {
    if(this === event.target) {
        alert("container was clicked");
    }
});

我的问题:这被认为是“最佳做法”吗? 是否有更好的方法使用jQuery来“开箱即用”地完成相同的结果?

行动示例: http//jsfiddle.net/FKX7p/

#1楼 票数: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");
});​

#2楼 票数: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;

#3楼 票数:0

我不确定哪一个工作更快,但下一个代码会更好有意义:

$("#container").click(function (e) {
    if (e.target.id && e.target.id !== "container") return false;
});

  ask by Andre Meinhold translate from so

未解决问题?本站智能推荐:

1回复

Div事件冒泡

我的项目中有一个窗口单击eventListener和div元素上的一些click事件。 如果我单击div,则此div元素上的click事件(正确),并且窗口click eventListener触发(不正确)。 我可以冒泡div元素,即单击窗口事件监听器不会触发事件吗? 为了更好地
1回复

如何确保绑定到hashChange事件不会冒泡?

我正在尝试保持我的hashChange事件绑定冒泡。 我有这个: 我的脚本管理页面上的面板,每个面板都有自己的历史堆栈。 上面的每次转换都会触发,但是我阻止了前向转换的hashChange,所以我可以更深入地进入面板。 在向后的“转换”中,只有hashChange触发并且没有被
2回复

使用冒泡 (JavaScript/jQuery) 将事件处理程序绑定到特定元素

我正在开发一个接近 Firebug 检查器工具功能的项目。 也就是说,当鼠标悬停在页面上的元素上时,我想突出显示它们(通过更改它们的背景颜色),并且当它们被点击时,我想执行一个函数来构建一个可以使用的 CSS 选择器来识别它们。 但是,我一直遇到与事件冒泡相关的问题,并且让我自己彻底糊涂了。 与其
2回复

Javascript Mouseover从孩子们冒泡

我有以下html设置: 它的风格,所以你不能悬停div1而不悬停其他2个div之一。 现在我在div1上有一个mouseout。 问题是当我从content1移动到content2时,我的div1.mouseout被触发,因为它们的mouseout正在冒泡。 并且事件的targ
2回复

奇怪的冒泡问题

我不确定为什么会这样冒泡,但是确实如此。 想知道是否有人有任何想法吗? 因此,如果我上传文件,则会在控制台中得到以下内容: 如果我连续第二次这样做: 和三遍: 等等 我假设live()事件冒泡了,“ go ”也会冒泡,但事实并非如此。 我几乎在提交的任何
4回复

jQuery:绑定一个可以处理其子事件的事件监听器

我遇到了一个我不知道解决方案的问题。 假设我有这个HTML标记(由服务器动态生成或只是静态文件): 我想将click事件处理程序绑定到<a>标记。 通常,我会写出来 这将对所有锚标记执行隐式迭代,以将click事件绑定到每个锚标记。 但是,我被告知这是一项昂
5回复

如何使用委托事件,命名空间和附加多个事件处理程序

JSfiddle jsfiddle 我想在每个名称间隔事件上使用事件委托的这个概念。 Appernetly它比.big-ul li更优化。 遗憾的是,在使用命名空间或尝试使用普通对象同时附加多个事件处理程序时,我找不到正确的语法使其工作? 来自jquery站点的事件委派示例
1回复

如何保持事件冒泡

我在jQuery中有两个onclick事件 如果要按下上述按钮,我希望第一个始终执行,第二个不执行。 问题是,即使我按照上面的顺序绑定它,它也总是到达第一个……并且当它到达第一个时,它永远不会到达我需要执行的第二个。 我认为“返回真实”会让它冒泡,但它只是退出了。 有什么想法吗