Firefox无法阻止dispatchEvent触发的submit事件技术咨询

这个问题我之前排查过，核心原因在于你手动创建submit事件时，没有将它设置为可取消状态。

根据DOM标准，Event构造函数的默认配置是{ bubbles: false, cancelable: false }——也就是说，你用new Event('submit')创建的事件本身是不可被取消的。哪怕你在handleSubmit里调用了evt.preventDefault()，Firefox也会严格遵循规范，完全忽略这个调用，导致表单还是会执行默认提交行为。而Chrome等浏览器做了兼容性宽松处理，允许取消这类手动触发的事件，所以不会出现问题。

解决方案 #

你有几个可行的修复方案：

1. 显式设置事件为可取消 #

修改submit()方法里的事件创建代码，添加cancelable: true配置：

submit() {
  if (this.form.checkValidity()) {
    // 显式声明事件可取消，让preventDefault生效
    this.form.dispatchEvent(new Event('submit', { cancelable: true }))
  }
}

这样Firefox就能识别到preventDefault()的调用，阻止默认提交了。

2. 直接调用处理函数（更简洁） #

既然你本来就是想触发handleSubmit里的逻辑，完全可以跳过事件触发环节，直接手动调用处理函数：

submit() {
  if (this.form.checkValidity()) {
    // 传入一个模拟的事件对象，包含preventDefault空方法即可
    this.handleSubmit({ preventDefault: () => {} })
  }
}

这种方式完全绕开了浏览器的事件差异，兼容性更好。

注意：不要直接调用表单原生的form.submit()方法——它会直接触发浏览器的默认提交，不会触发你绑定的onSubmit事件监听器，会跳过你的数据处理逻辑。

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