停止javascript事件传播

Question

当您将鼠标悬停在以下网站上的其中一个图像上时，会显示div，其中包含操作按钮。 单击div时，弹出窗口打开，当您单击子操作按钮时，将发生另一个事件。

当你点击其中一个div的子按钮时弹出窗口。 我试图使用下面的代码停止事件传播。

http://penguinenglishlibrary.tumblr.com/

$(document).on('click', '#DOMWindow .like', function(event) {
    event.preventDefault();
    event.stopPropagation();

});

Answer 1

您无法停止传播，因为该事件已委派。 你真的需要代表团，即#DOMWindow .like 。在绑定时是否已经存在？ 万一它，你可以这样做：

$('#DOMWindow .like').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

或者，正如我后来在评论中所说：

如果你真的需要委托，你可以将你的处理程序逻辑包装在if中，检查event.target是否为#DOMWindow .like 。 如果是的话，让处理程序完成它的工作，否则就意味着它正在冒泡，所以什么都不做。

Answer 2

也许

jQuery('#DOMWindow .like').unbind('mouseenter mouseleave');

假设您在jQuery（.selector'）上附加了一个事件.hover（）它可能会起作用

Answer 3

您无法以事件绑定的方式停止传播。 它必须document 。 一旦事件命中document ，它就会冒泡到顶部，因此无法停止，因为它已经传播。

尝试将事件绑定到更接近.like的父元素，例如#DOMWindow 。 注意：绑定事件的元素在调用它时必须在DOM中（并保留在DOM中）。

$('#DOMWindow').on('click', '.like', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

看看我做的这个例子： http ： //jsfiddle.net/QAZ3v/它应该告诉你我的意思。

Answer 4

根据jQuery中on（）函数的文档，

默认情况下，大多数事件从原始事件目标冒泡到文档元素。 在整个过程中的每个元素，jQuery调用已附加的任何匹配的事件处理程序。 处理程序可以通过调用event.stopPropagation（）来防止事件在文档树中进一步冒泡（从而防止这些元素上的处理程序运行）。 然而，附加在当前元素上的任何其他处理程序都将运行。 为防止这种情况，请调用event.stopImmediatePropagation（）。 （绑定到元素的事件处理程序的调用顺序与它们绑定的顺序相同。）

所以看来

  event.stopImmediatePropagation();

是你在找什么。 返回false可能也有效，但我不太确定。

来源： http ： //api.jquery.com/on/

编辑：在小提琴中测试我的两个建议后，似乎既不适用于点击处理程序。 我有兴趣知道他们是否适用于on（）。