含onclick提交逻辑的表单是否会重复提交？标准行为确认

这确实是标准浏览器行为，你的测试结果完全符合规范，不用担心是代码出问题啦！

核心原因：浏览器会合并重复的表单提交动作 #

当你点击<button type="submit">或者<input type="submit">时，会触发两个相关的操作：

1. 执行onclick事件里的代码（也就是你调用document.myform.submit()的部分）
2. 触发按钮的原生默认提交行为

但浏览器会智能检测到：这两个动作最终都是要提交同一个表单，所以会把它们合并成一次提交流程，不会重复执行。

具体的执行逻辑是：

• 首先执行onclick中的submit()调用，启动表单提交
• 当浏览器准备执行按钮的默认提交时，发现当前已经有一个针对该表单的提交操作在处理中，就会直接忽略这个默认动作，避免重复提交。

验证这个逻辑的小测试 #

你可以试试这两种情况，进一步确认：

1. 阻止默认行为，只保留手动提交

<form name="myform" action="" method="get"> 
  <button type='submit' onclick='submitForm(event);'>Submit</button> 
</form> 
<script> 
function submitForm(e){ 
  console.log('Button Clicked'); 
  // 阻止按钮的默认提交行为
  e.preventDefault();
  document.myform.submit(); 
} 
</script>

这时候表单只会提交一次，就是你手动调用的那次。

2. 去掉手动提交，只保留默认行为

<form name="myform" action="" method="get"> 
  <button type='submit' onclick='console.log("Button Clicked");'>Submit</button> 
</form>

这时候表单也只会提交一次，就是按钮的默认提交动作。

总结 #

浏览器的这个设计是为了避免表单重复提交的问题，属于HTML和JS规范里的标准行为，不管你用<button>还是<input type="submit">，都会遵循这个逻辑。所以即使你不写return false;，也不会出现两次提交的情况～

内容的提问来源于stack exchange，提问作者awgtek