JQuery - 在所有浏览器中停止事件冒泡答案

【问题标题】：JQuery - Stopping Event Bubbling in all BrowsersJQuery - 在所有浏览器中停止事件冒泡
【发布时间】：2011-02-24 11:19:47
【问题描述】：

我有一些大规模嵌套的 GUI 控件 - 当它们被单击或更改时，或者我需要阻止事件在 DOM 树中进一步上升时。它需要适用于所有浏览器。

此时我有一些相当笨重的 JS 代码：

//Do something in response to the original user action
//Leave it at that.
try {
        e.stopPropagation();
    }
    catch (ex) {

    }
    try {
        event.cancelBubble();
    }
    catch (ex) {

    }

    try {
        event.preventDefault();
    }
    catch (ex) { }
...

这确实有效，但它闻起来感觉不对（我个人讨厌空的 catch 块）。我可以使用更简洁的 x 浏览器技巧吗？

【问题讨论】：

标签： javascript jquery cross-browser event-bubbling

【解决方案1】：

如果您使用 jQuery，那么只需 event.stopPropagation() 就可以正常工作。 jQuery统一了事件处理。

一般来说，如果你想测试特殊的浏览器方法，你可以这样做：

if(event.stopPropagation) {
    event.stopPropagation();
}
else if...

这就是 jQuery 正在做的事情。它为事件创建一个包装器并提供一个统一的接口。

事件对象的名称由你定义。事件对象作为第一个参数传递给您的事件处理程序。您必须设置事件处理程序以接受参数，例如：

$('selector').click(function(foo) { // could be event, e, bar, whatever you want
    foo.stopPropagation();
});

通常使用e 或event。

【讨论】：

啊-我试图调用 e.stopPropagation() 谢谢 v. 非常有效。
@5arx：这取决于参数名称。如果你有$(....).click(function(e){})，那么你必须打电话给e.stop...。
好的，谢谢，很高兴知道。我从单选按钮调用函数，所以使用 $(...).change(function(){...});即没有事件参数，所以我猜“事件”是这里的全局关键字？
@5arx：嗯，它会被当作全局变量，但不会被定义。正如我所说，你必须定义你的函数来接受参数：$(...).change(function(e){...});
@5arx：@gov 的答案对于 jQuery 是正确的，其中 return false 调用了 e.stopPropagation() 和 e.preventDefault()。但是，在 DOM 事件处理程序中，如果使用 addEventListener() 添加事件处理程序，return false 将不执行任何操作，并且仅在其他情况下等效于调用 e.preventDefault()。

【解决方案2】：

cancelBubble 是布尔属性，而不是 Event 对象的方法。不需要 try/catch，因为您可以在使用之前测试所需的属性或方法。因此，如果没有 jQuery，以下内容将为事件对象 e 执行您想要的操作：

if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
} else if (typeof e.cancelBubble != "undefined") {
    e.cancelBubble = true;
}

【讨论】：

我正在使用 JQuery（现在有没有人在没有它的情况下进行 JavaScript 开发？我认为不是 [img180.imageshack.us/img180/3305/addanumbertoanothernumb.png]），但感谢您提供的信息。总有一天我会好好看看 JS 事件模型。一天...
@5arx：其实就是DOM事件模型。现在理解它将有助于您理解事件的一般运作方式。看看quirksmode.org/js/introevents.html。是的，JS 开发仍然是在没有 jQuery 的情况下完成的。它不是万能的解决方案。
@5arx：我不使用 jQuery：我正在处理的 JavaScript 项目有些专业，不适合 jQuery，而且我已经做了很长时间了并了解浏览器问题。此外，我想尝试说明没有 jQuery 的生活并没有那么可怕。
@FelixKing & @TimDown 非常感谢。我已决定在下一个“20% 日”调查 DOM 事件。这些天我主要做服务器端编码——我在 Jquery 之前对 JS 开发的尝试都是关于 'document.getElementById(...) 和可怕的！也感谢您的链接，看起来不错。