javascript - 为什么 Internet Explorer 不能一致地触发提交事件？

Question

今天在 Internet Explorer 中发现了一个明显的错误，但无法通过研究进行验证。有没有人遇到过这个和/或可以解释一下？

概要

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，此示例代码实际上不会发布请求。)

工作代码段:请向下滚动并单击“运行代码段”，然后尝试快速双击“提交”按钮，并观察结果。 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>

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");
});