JavaScript表单提交时e.preventDefault()不生效问题排查求助

问题原因 #

你的代码核心问题是**addEventListener绑定提交监听器的时机错误**。
你将绑定监听器的逻辑写在了signup函数内，而signup本身是表单第一次触发submit事件时才会执行的回调：

1. 第一次点击提交按钮，触发表单submit事件，优先执行signup函数
2. 此时才会给表单绑定新的submit监听器，但本次submit事件已经传播完毕，不会触发刚绑定的监听器，e.preventDefault()自然不会执行，表单直接走默认提交逻辑
3. 只有第二次点击提交时，之前绑定的监听器才会生效，但第一次提交早就已经完成，因此你会觉得阻止逻辑始终不生效

修复方案 #

推荐完全移除行内onsubmit属性，统一用addEventListener绑定事件，不要混用两种事件绑定方式：

1. 修改HTML表单标签，删除onsubmit属性：

<form id="myform" class="signup-form" method="POST">
<!-- 其余表单内容保持不变 -->

2. 修改JS代码，页面加载完成后直接绑定监听器，不要等submit事件触发才绑定：

// 直接在全局作用域绑定提交监听器，页面加载完成后就生效
const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("I am in eventListener");

    // 把原来signup函数里的校验逻辑挪到这里
    const fUsername = document.getElementById("username").value;
    const sUsername = document.getElementById("confirm-username").value;
    const email = document.getElementById("email").value;
    const fPassword = document.getElementById("password").value;
    const sPassword = document.getElementById("confirm-password").value;
    
    // 后续补充你的表单校验、提交逻辑
});

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