问题 没有jQuery的stopPropagation


我绑定到一个链接(通过使用 .live() jQuery的功能) click 事件然后手动添加 onclick 具有纯JS和HTML的事件处理程序(如 <a href="".... onclick="some action">)。我想防止事件冒泡到 live 方法,但我不知道如何。

也许 e.stopPropagation() 在这种情况下是有用的,但事件处理程序添加了 onclick 是用纯JS编写的,我不能打电话 stopPropagation() 来自jQuery元素包装器外部。 return false 在这种情况下不起作用。我试着替换 return false 同 $.Event('click').stopPropagation() 但我认为这是错误的,因为它不起作用。

如何防止起泡 live() 没有jQuery包装器的方法?


3848
2017-08-17 15:55


起源

return false 应该做的伎俩。如果你这样做,它应该工作: <a href="".... onclick="some action; return false;"> 。顺便说一句。 event.stopPropagation() 不是一个jQuery方法。问题是IE使用了不提供此方法的不同事件模型,因此 returnING false 在这种情况下是最好的解决方案。问题是,为什么要使用内联事件处理程序? - Felix Kling
return false不取消由.live绑定的事件 - abonec
在jQuery函数中返回false与其外部不一样: stackoverflow.com/questions/1357118/... - Mrchief
@Mrchief:我明白了......我一直认为这是...... - Felix Kling


答案:


。生活,你无法阻止传播。这是因为 .live,事件处理程序绑定到DOM树的根。因此,在调用处理程序之前,事件必须冒泡到最高元素。它是使用中的一个警告 .live

考虑使用 。代表 (如果您希望处理程序保持不变)或使用 .bind 代替。

如果要完全禁用实时处理程序,请使用die:

$("#myHref").die("click", aClick); // this will remove any existing event handlers
$("#myHref").click(yourhandler);   // add your handler

演示1:JsFiddle 1

或者,添加内联处理程序(并从那里取消事件):

<a href=".." onclick="yourhandler">

演示2:JsFiddle 2

内联处理程序将始终在任何jquery事件处理程序之前被调用。


2
2017-08-17 15:59



我无法更改由.live绑定的代码。有没有办法解决这个问题? - abonec
但是可以从绑定到该元素的另一个事件处理程序停止该事件。 - Felix Kling
仅在首先注册该事件处理程序时。 jQuery会将它们排队,对吗? - Mrchief
@Abonec:看到我更新的答案和小提琴。希望你可以使用其中之一。 - Mrchief
@Abonec:在FF中更新的小提琴: jsfiddle.net/mrchief/VtJyg/26 - Mrchief


我是在假设的 return false 在“正常”事件处理程序中也可以防止事件冒泡, 但是我错了 (谢谢 @Mrchief)。

还有其他方法可以阻止它,如上所述 quirksmode.org

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

cancelBubble 适用于IE, stopPropagation 适用于所有兼容W3C的浏览器。


14
2017-08-17 16:14



几周前我就学会了! - Mrchief
当我尝试获取有关事件的任何信息时(onclick“alert(window.event)”),当我点击时它会向我显示警告“未定义”。 - abonec
@Abonec: window.event 仅适用于IE(和Chrome)。在其他浏览器中,事件对象作为参数传递给事件处理程序。 - Felix Kling
@Abonec:如果你有一个内联事件处理程序,那么事件对象可以通过变量获得 event 或通过 window.event。例如。 onclick="event = event || window.event; event.cancelBubble = true; //etc...."。或者您定义了一个函数并调用 onclick="something(event||window.event)"。 - Felix Kling
@Abonec:一般来说我可以推荐阅读 MDN JavaScript指南 关于事件处理,请看一下 quirksmode.org的文章。如果你读到两者,你就有了很好的基础。 - Felix Kling