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

Why doesn't Internet Explorer trigger the submit event consistently?

本文关键字：提交 事件 Internet Explorer 不能 为什么      更新时间：2023-09-26

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

简介

Internet Explorer(至少9和11)并不总是触发(或处理?)提交事件。注意到一个快速点击提交按钮会导致跳过一些提交的情况。在Chrome和Firefox中不存在此问题。

测试用例

    简单的表单，只有一个输入和一个提交按钮。
  • Javascript处理程序在表单提交:显示submit，然后返回false
  • Javascript处理提交按钮的点击:显示click
  • 为清晰使用jQuery(同样的问题被注意到与等效的非jQuery解决方案)
  • 要执行测试，用户必须快速双击Submit按钮并观察处理了哪些事件。
测试结果

Firefox和Chrome正常运行:

click
submit
click
submit

Internet Explorer做了一些奇怪的事情(和往常一样):

click
submit
click

没有第二次提交!仅使用IE时，不会调用客户端处理程序，Fiddler显示请求永远不会在生产环境中发生。(注意，由于return false，这个示例代码实际上不会POST请求。)

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

不确定您想要实现什么，但我猜您是在试图防止表单的双重提交?在这种情况下，也许你可以使用这样的语句:

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");
});
相关文章：