为什么Internet Explorer不能始终触发提交事件?

not*_*ary 7 html javascript forms internet-explorer

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

概要

Internet Explorer(至少9和11)并不总是触发(或处理?)提交事件.注意到稍微快速单击提交按钮导致某些提交被跳过的情况.Chrome和Firefox中未注意到此问题.

测试用例

  • 简单的表单,单输入和单个提交按钮.
  • 表单上的Javascript处理程序提交:显示submit,然后返回false
  • 单击提交按钮时的Javascript句柄:显示 click
  • jQuery用于清晰(相同的非jQuery解决方案注意到相同的问题)
  • 要执行测试,用户必须快速双击"提交"按钮并观察处理哪些事件.

检测结果

Firefox和Chrome按预期工作:

click
submit
click
submit
Run Code Online (Sandbox Code Playgroud)

Internet Explorer做的事情很奇怪(像往常一样):

click
submit
click
Run Code Online (Sandbox Code Playgroud)

没有第二次提交!仅使用IE,不会调用客户端处理程序,Fiddler会在生产环境中显示请求永远不会发生.(请注意,此示例代码实际上不会POST请求,因为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");
});
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

OZZ*_*ZIE 0

不确定您想通过此实现什么目的,但我猜您正在尝试防止表单的重复提交?在这种情况下,也许你可以使用类似的东西:

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");
});
Run Code Online (Sandbox Code Playgroud)