如何强制浏览器在为提交按钮添加事件监听器时不执行preventDefault？

嘿，我来帮你搞定这个问题！其实核心就是要让浏览器保留默认的表单提交行为——哪怕你给提交按钮加了自定义的事件逻辑，对吧？我给你几个实用的、开发里常用的解决办法：

• 最直接的方案：别调用preventDefault()
  要是这个事件监听器是你自己写的，那最简单的办法就是删掉代码里的e.preventDefault()这一行！比如你的代码原本是这样的：

  const button = document.getElementById('123');
  button.addEventListener('click', (e) => {
    // 这里放你的自定义逻辑，比如验证输入、记录操作日志
    e.preventDefault(); // 直接把这行删掉就好！
  });
  

  删掉那行之后，点击按钮会先跑完你的自定义代码，然后浏览器会自动执行默认的表单提交动作，完全符合你的需求。

• 没法修改现有监听器？手动触发表单提交
  要是这个监听器是第三方代码加上的，或者你没法直接修改里面的内容，那可以在自己的逻辑里手动触发表单提交。比如：

  const button = document.getElementById('123');
  const targetForm = button.closest('form'); // 找到按钮所属的表单
  
  button.addEventListener('click', () => {
    // 先执行你的自定义操作
    console.log('先跑完我的业务逻辑');
    // 手动提交表单，这会绕过任何阻止默认行为的设置
    targetForm.submit();
  });
  

  这里用form.submit()的好处是，它会直接触发浏览器的表单提交流程，不会触发表单的submit事件，所以就算之前有监听器阻止了默认行为，也不影响这次提交。

• 别忘了检查表单的submit事件
  有时候问题不一定出在按钮的click事件上，而是表单本身的submit事件监听器里调用了preventDefault()。所以你也要顺带检查一下表单的监听器，如果有这行代码，同样删掉就行，或者用上面的手动提交方法绕过去。

总结一下：只要确保没有代码主动阻止默认行为，或者用手动提交的方式强制触发，就能让浏览器正常执行表单提交啦！

内容来源于stack exchange