Question

我有一些大规模嵌套的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浏览器技巧吗？

Answer 1

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

通常，如果您要测试特殊的浏览器方法，可以这样做：

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

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

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

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

通常使用 e或event。

Answer 2

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

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

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

2 个答案: