为什么Internet Explorer没有始终触发提交事件？

Question

今天在使用Internet Explorer时发现了一个明显的bug，但是无法通过研究进行验证。有人遇到过这种情况或者能够解释一下吗？

概述

Internet Explorer（至少9和11版本）并不总是触发（或处理）提交事件。注意到当快速点击提交按钮时会跳过某些提交的情况。在Chrome和Firefox中没有注意到这个问题。

测试用例

• 一个简单的表单，只有一个输入框和一个提交按钮。
• 表单提交时使用JavaScript处理程序：显示submit，然后返回false。
• 单击提交按钮时使用JavaScript处理程序：显示click。
• 为了清晰起见，使用jQuery（使用等效的非jQuery解决方案会出现相同的问题）。
• 要执行测试，用户必须快速双击提交按钮并观察哪些事件被处理。

测试结果

Firefox和Chrome的工作正常：

click
submit
click
submit

Internet Explorer做了一些奇怪的事情（通常如此）：

click
submit
click

不存在第二遍提交！仅在IE浏览器中，客户端处理程序不起作用，Fiddler显示请求在生产环境中从未发生。（请注意，由于return false，此示例代码实际上不会POST请求。）

工作的代码片段：请向下滚动并单击"Run Snippet"，然后快速双击提交按钮，并观察结果。JSFiddle

feedback = function (t) {
    $div = $("<div class='line'></div>");
    $div.html(t);
    $("#feedback").append($div);
};
$("#theForm").on("submit", function (e) {
    feedback("submit");
    return false; // don't actually submit form, or SO chokes
});
$("#btnSubmit").on("click", function (e) {
    feedback("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='theForm' action="DISABLED BY RETURN FALSE" method="POST">
    <input type='text' />
    <input id='btnSubmit' type='submit' />
</form>
<div id='feedback'></div>

- nothingisnecessary

Answer 1

我不确定你想要实现什么，但我猜测你是想防止表单的重复提交？如果是这样，也许你可以使用类似以下的方法：

feedback = function (t) {
    $div = $("<div class='line'></div>");
    $div.html(t);
    $("#feedback").append($div);
};
$("#theForm").on("submit", function (e) {
    feedback("submit only once");
    $(this).find("#btnSubmit").attr("disabled", "disabled");
});

- OZZIE