javascript – 为什么Internet Explorer不会一致地触发提交事件?

前端之家收集整理的这篇文章主要介绍了javascript – 为什么Internet Explorer不会一致地触发提交事件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
今天在Internet Explorer中发现了一个明显的错误,但无法通过研究进行验证.有没有人遇到这个和/或可以解释一下?

概要

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

测试用例

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

检测结果

Firefox和Chrome按预期工作:

  1. click
  2. submit
  3. click
  4. submit

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

  1. click
  2. submit
  3. click

没有第二次提交!仅使用IE,不会调用客户端处理程序,Fiddler会在生产环境中显示请求永远不会发生. (请注意,此示例代码实际上不会POST请求,因为返回false.)

工作代码段:请向下滚动并单击“运行代码段”,然后尝试在“提交”按钮上快速双击,并观察结果. JSFiddle

  1. Feedback = function (t) {
  2. $div = $("<div class='line'></div>");
  3. $div.html(t);
  4. $("#Feedback").append($div);
  5. };
  6. $("#theForm").on("submit",function (e) {
  7. Feedback("submit");
  8. return false; // don't actually submit form,or SO chokes
  9. });
  10. $("#btnSubmit").on("click",function (e) {
  11. Feedback("click");
  12. });
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <form id='theForm' action="DISABLED BY RETURN FALSE" method="POST">
  3. <input type='text' />
  4. <input id='btnSubmit' type='submit' />
  5. </form>
  6. <div id='Feedback'></div>

解决方法@H_403_34@
不确定你想用这个来实现什么,但我猜你是在试图阻止表单的双重提交?在这种情况下,你可以使用类似的东西:
  1. Feedback = function (t) {
  2. $div = $("<div class='line'></div>");
  3. $div.html(t);
  4. $("#Feedback").append($div);
  5. };
  6. $("#theForm").on("submit",function (e) {
  7. Feedback("submit only once");
  8. $(this).find("#btnSubmit").attr("disabled","disabled");
  9. });

猜你在找的JavaScript相关文章