javascript - <按钮类型 ="submit"> 在 IE 和 chrome 中的行为不同 : Why?

Question

表单在 IE(Internet Explorer 版本:11.713.10586.0)中提交了两次，但在 Chrome 中只提交了一次。

<div id="pageButtons">
  <button type="submit" onClick="sendAction('submit')"> Submit </button>
</div>

sendAction 函数是这样的:

function sendAction(anAction){
   document.form._action.value = anAction ;
   document.form.submit();
}

因此，由于按钮类型是提交，而且在函数 sendAction 中我正在通过代码提交，所以表单被同时提交了两次。

所以我将按钮 HTML 部分更改为:

<div id="pageButtons">
      <button type="button" onClick="sendAction('submit')"> Submit </button>
</div>

然后它在 IE 中运行良好。现在我无法理解的是，如果 type="submit"导致在 IE 中两次提交表单，为什么它在 Chrome 中工作正常。在 chrome 中，它也应该提交两次，因为按钮类型是提交，而且我还硬编码了“document.form.submit()”。

谁能告诉我原因吗？

Answer 1

您的按钮在 sendAction() 之后继续执行函数执行，导致双重表单提交(一次作为 sendAction() 函数的一部分，一次作为普通 HTML <form> <button type="submit"> 行为的一部分。

尝试添加 return false在你的函数中:

function sendAction(anAction){
   document.form._action.value = anAction ;
   document.form.submit();
   return false;
}

并添加return在你的 onClick 中:

<button type="button" onClick="return sendAction('submit');"> Submit </button>

这将允许 sendAction()触发表单提交，然后 return false返回onClick()这将阻止<button>从它的正常行为。

正如 Sagar V 上面指出的那样，Chrome 足够聪明，可以更好地了解。 IE，不太聪明: