如何拦截JS事件触发的表单提交？原生JS实现方案

这个问题确实挺常见的——用addEventListener监听表单的submit事件，对付用户点击按钮或者按回车提交没问题，但碰到JS主动调用form.submit()就完全失效了，对吧？

为什么原来的方案没用？ #

这是因为浏览器的原生规则里，通过JS直接调用form.submit()并不会触发submit事件，所以你之前加的事件监听根本捕获不到这个操作。事件监听只能捕获用户交互触发的提交流程，JS主动调用属于绕过了事件触发环节的直接调用。

解决方案：重写原生submit方法 #

要拦截这类调用，我们需要把表单的原生submit方法“包装”一层，替换成我们自己的逻辑，这样不管是哪种方式调用submit，都会经过我们的拦截判断。

全局拦截所有表单（适用于需要统一处理的场景）

// 先保存原生的submit方法，避免丢失
const originalSubmit = HTMLFormElement.prototype.submit;

// 重写HTMLFormElement的submit原型方法
HTMLFormElement.prototype.submit = function() {
  // 这里写你的拦截逻辑，比如校验表单、确认操作等
  const shouldSubmit = this.checkValidity(); // 示例：用原生表单校验判断是否允许提交
  
  if (shouldSubmit) {
    // 如果允许提交，调用原生submit方法，注意用apply绑定正确的this上下文
    originalSubmit.apply(this, arguments);
  } else {
    // 不允许提交时的处理，比如提示用户
    console.log('表单校验不通过，提交已拦截');
    return false;
  }
};

只拦截特定表单（更灵活，避免影响全局）

如果不需要拦截所有表单，只想针对某个特定表单处理，可以单独重写该表单的submit方法：

const targetForm = document.getElementById('target-form');
// 保存该表单的原生submit方法
const originalFormSubmit = targetForm.submit;

// 替换为自定义逻辑
targetForm.submit = function() {
  // 自定义拦截判断，比如检查特定字段
  const isAgreed = this.querySelector('[name="agree"]').checked;
  
  if (isAgreed) {
    originalFormSubmit.apply(this, arguments);
  } else {
    alert('请先同意条款再提交');
  }
};

注意事项 #

• 重写原型方法时，一定要先保存原生方法，否则会彻底覆盖原生功能，导致正常提交也失效。
• 调用原生方法时要用apply或call绑定当前表单的this，确保原生方法能正确作用于目标表单。
• 如果你的页面中有第三方脚本也会调用表单submit，这种方案同样能拦截到，适合需要全局管控表单提交的场景。

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