Javascript JQuery-停止所有浏览器中的冒泡事件

我有一些大规模嵌套的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) { }
...

---

这确实管用，但闻起来和摸起来都不对（就我个人而言，我讨厌空的抓块）。有没有更整洁的x浏览器技巧我可以使用？

如果使用jQuery，那么就可以了。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

。

cancelBubble

是一个布尔属性，而不是

事件

对象的方法。不需要try/catch，因为您可以在使用它之前测试所需的属性或方法。因此，在没有jQuery的情况下，下面将为事件对象

e

执行您想要的操作：

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

---

啊-我正试着打电话给e.stopPropagation（）谢谢。大多数情况下都能很好地工作。@5arx:这取决于参数名。如果您有

$（..）。请单击（函数（e）{}）

，然后您必须调用

e.stop…

。好的，谢谢您知道这一点。我从单选按钮调用函数，因此使用$（…）.change（function（）{…}）；i、 e没有事件参数，所以我猜“event”在这里是一个全局关键字？@5arx:嗯，它将被视为全局变量，但不会被定义。正如我所说，您必须定义您的函数来接受参数：

$（…）.change（function（e）{…}）

@5arx:@gov的答案对于jQuery是正确的，其中

返回false

调用

e.stopPropagation（）

和

e.preventDefault（）

。但是，在DOM事件处理程序中，如果使用

addEventListener（）

添加事件处理程序，

return false

将不起任何作用，这相当于调用

e.preventDefault（）

，只有在其他情况下才起作用。我使用的是JQuery（现在有人在没有它的情况下进行JavaScript开发吗？我想没有[）但是谢谢你提供的信息。总有一天我会好好看看JS事件模型。总有一天…@5arx:事实上它是DOM事件模型。现在理解它将有助于你理解事件的一般工作方式。看看。是的，JS开发仍然是在没有jQuery的情况下完成的。它不是所有问题的解决方案。@5arx:我不使用jQuery：我正在从事的JavaScript项目有些专业化，不适合jQuery，加上我做这方面的工作已经很长时间了，并且了解浏览器问题。此外，我喜欢尝试说明没有jQuery的生活并不可怕。@FelixKing&@TimDown非常感谢。我已经决定在我的网站上查看DOM事件接下来是“20%的一天”。这几天我主要做服务器端编码——我在Jquery之前对JS开发的尝试都是关于“document.getElementById（…）的，够吓人的了！谢谢你的链接，看起来不错。