如何实现点击链接提交表单的同时触发onsubmit绑定的函数？

根据HTML DOM的标准行为，调用表单对象的原生submit()方法时，完全不会触发表单绑定的submit事件。
这不是代码逻辑错误，而是API本身的设计定位：submit()的作用是提供一个绕开校验、绕开submit事件拦截的直接提交通道，所以你现在a标签点击后调用form.submit()，绑定在表单上的onsubmit回调根本不会被执行，也就不会走到test22()的提示逻辑。
另外当前代码还有个会影响效果的小疏漏：表单的onsubmit处理函数没有透传内部test22()的返回值，哪怕后续正常触发了submit事件，因为处理函数没有显式返回false，浏览器还是会执行默认的表单提交跳转。

方案1：使用标准API requestSubmit() #

这是最匹配需求的实现，只需要把a标签里原来的submit()调用替换为requestSubmit()即可：

• 调用requestSubmit()时，浏览器会完整走全流程submit逻辑：包括表单内置的校验规则、所有绑定在表单上的submit事件监听器
• 如果事件回调里返回false，或者调用了preventDefault()，浏览器会正常中断提交动作，和用户点击原生<input type="submit">按钮的行为完全一致
• 替换后的a标签代码：

  <a onclick="document.getElementById('abc').requestSubmit();">
    <h1>Click Me</h1>
  </a>
  

• 同时修正onsubmit的返回值透传问题，确保拦截逻辑能生效：

  document.getElementById("abc").onsubmit = function() {
    // 必须把test22的返回值向上传递，才能触发submit的拦截效果
    return test22();
  };
  

方案2：老旧浏览器兼容处理 #

如果需要兼容不支持requestSubmit()的极老浏览器（如IE11及更早版本），可以手动模拟submit事件的执行流程：

1. 触发提交时，先手动调用表单绑定的onsubmit处理函数，拿到函数的执行返回值
2. 只有当处理函数没有返回false时，才执行实际的form.submit()提交动作

参考实现：

function triggerFormSubmit() {
  const form = document.getElementById('abc');
  // 执行绑定的submit回调，判断是否放行
  const isAllowSubmit = form.onsubmit ? form.onsubmit.call(form) : true;
  if (isAllowSubmit !== false) {
    form.submit();
  }
}

把a标签的onclick替换为triggerFormSubmit()即可，同样能实现点击链接时正常执行绑定的onsubmit逻辑、根据函数返回值拦截提交的效果。

注意：手动模拟的方案仅兼容通过onsubmit属性绑定的回调，对通过addEventListener绑定的多组监听器支持有限，现代浏览器环境优先使用requestSubmit()方案。

内容的提问来源于stack exchange，提问作者pRäsÄd k