跨浏览器判断 DOM 事件是否被取消的方法答案

【问题标题】：Cross-browser way to determine whether a DOM event was cancelled跨浏览器判断 DOM 事件是否被取消的方法
【发布时间】：2010-10-05 19:01:55
【问题描述】：

是否有来自 Javascript 事件处理程序的跨浏览器方式来确定事件是否已被先前的处理程序取消？ IE 和 Chrome 等其他浏览器具有可以测试的 event.returnValue property，但 FireFox 似乎没有任何此类属性。

这是我正在谈论的场景的一个示例。你有一个像这样的表格：

<form id="test" name="test" onsubmit="return false;" />

然后你在 Javascript 中使用 addEventListener/attachEvent 将一个事件连接到它（为简洁起见省略了连接）。该事件需要知道链中之前的任何内容是否返回 false 或以其他方式取消它。 IE版本是这样的：

function onSubmitHandler(e) {
    alert("event was cancelled prior to this handler: " + e.returnValue);
}

这适用于 IE、Chrome 等，但当然不适用于 FireFox，因为它没有 event.returnValue。我已经梳理了互联网上的任何其他方法来在 FireFox 中确定这一点，但一无所获。这个问题有没有不直接设置表单的onsubmit属性的解决方案？

【问题讨论】：

标签： javascript dom dom-events dhtml

【解决方案1】：

我的理解是 event.returnValue 的主要用途是防止该事件的默认操作（即取消它）。例如，在像你上面这样的处理程序中：

function onSubmitHandler(e) {
    e.returnValue = false;
}

IE 中的上述代码会阻止默认操作，阻止提交表单。根据Gecko DOM Reference，Firefox 中的等效代码是：

e.preventDefault();

如果您想检查某个事件是否已被取消，并以跨浏览器的方式进行，是否可以选择使用像 jQuery 这样的库？使用 jQuery 将函数绑定到表单的 onsubmit 事件并让该处理程序调用 .preventDefault() 将在所有受支持的浏览器中完成相同的事情。此外，您可以使用 jQuery 事件对象的 .isDefaultPrevented() 方法来确定事件是否已被取消，大概是通过 lhs = e.returnValue 完成您正在尝试的。

【讨论】：

我知道取消活动需要做什么，但这不是我想要做的。在这里使用 jQuery 不是一个选项，因为我正在编写一个需要能够与任何其他代码集成的库，例如 ASP.NET 验证，而不仅仅是使用 jQuery 的东西。
我查看了 isDefaultPrevented（它是一个 DOM 3 标准），但当然 DOM 3 事件并没有在 FireFox 中实现，所以这也是不行的。
如果是这种情况，我只能建议查看 jQuery（或任何其他跨浏览器库）的代码 preventDefault() 与我描述的完全一样。首先它检查 preventDefault 是否可用，如果不可用，则使用 IE 的 returnValue = false。然后在其他地方跟踪。
不幸的是，没有办法在其他地方跟踪，因为在 Firefox 中，您一开始不会收到有关值的通知。在我看来，这基本上是一个 Firefox 设计缺陷，使这种情况变得不可能。

【解决方案2】：

这是解决这个问题的方法。我希望有一种符合标准的干净方法，但似乎没有。

function onSubmitHandler()
{
    // only called if the other onsubmit handlers succeed
}

// hook in submit
var originalOnSubmit = form.onsubmit;

form.onsubmit = function(e)
{
    var ret;

    if (originalOnSubmit)
        ret = originalOnSubmit();

    if (ret != false)
    {
        return onSubmitHandler(e);
    }
};

【讨论】：