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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

为什么Internet Explorer不会始终触发提交事件？

1 个答案: