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 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（）。

停止javascript事件传播

4 个答案: