jQuery-在所有浏览器中停止事件冒泡

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就是这样做的。 它为事件创建包装，并提供统一的接口。

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

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

通常使用 e或event 。

Answer 2

cancelBubble是一个布尔属性，而不是Event对象的方法。 无需尝试/捕获，因为您可以在使用前测试所需的属性或方法。 因此，在没有jQuery的情况下，以下操作将完成事件对象e ：

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