e.preventDefault() 作用疑惑：为何表单自定义逻辑仍可执行？

用户提供的代码 #

表单代码 #

<form action="" method="">
          <label for="email">Email</label>
          <input type="email" name="email" id="email" />
          <label for="pass">Mot de passe</label>
          <input type="password" id="pass" name="password" />
          <input type="submit" value="Se connecter" />
</form>

JavaScript代码 #

submitButton.addEventListener("submit", async (e) => {
  e.preventDefault();
  const form = e.currentTarget;
  const data = new FormData(form);
  const email = data.get("email");
  const password = data.get("password");

  let user = {
    email: email,
    password: password,
  };
  let response = await fetch("http://localhost:5678/api/users/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json;charset=utf-8",
    },
    body: JSON.stringify(user),
  });

  const responseBody = await response.json();
  const token = responseBody.token;
  const id = responseBody.userId;
  const responseHtml = response.status;

  if (responseHtml != 200) {
    alert("Error " + responseHtml + " : Email ou Mot de passe Incorrect");
  } else {
    console.log(responseHtml);
    window.sessionStorage.setItem("token", token);
    window.sessionStorage.setItem("id", id);
    window.location.replace("./homepage_edit.html");
  }
});

用户疑问 #

添加e.preventDefault()后，账号密码正确时可跳转至./homepage_edit.html，错误时弹出提示；但如果不添加该方法，页面会直接刷新。原本以为e.preventDefault()应该阻止这些自定义逻辑的执行，因为它是用来阻止表单默认提交行为的，希望得到解答。

核心结论：e.preventDefault()只阻止表单的默认提交行为，完全不影响自定义代码执行 #

表单的默认提交行为是浏览器自带的逻辑：点击提交按钮后，自动把表单数据发送到action指定的地址（这里为空，所以提交到当前页面），然后刷新页面加载新的响应内容。

为什么不加e.preventDefault()页面会直接刷新？ #

不调用这个方法时，浏览器会同时触发两个操作：

1. 执行你写的submit事件回调里的自定义逻辑（发送fetch请求）
2. 触发表单默认提交行为——刷新页面

但页面刷新的速度远快于fetch请求的响应速度，导致自定义逻辑还没等到接口返回结果、执行弹窗或跳转步骤，页面就已经刷新了，后续逻辑直接被中断，看起来就像直接刷新了页面。

为什么加了e.preventDefault()后自定义逻辑能正常执行？ #

调用e.preventDefault()会取消浏览器的默认提交刷新行为，让页面保持当前状态。这时候你的自定义逻辑就能完整走完流程：发送请求、等待响应，根据结果弹窗或者跳转页面，不会被页面刷新打断。

简单说，这个方法是帮你关掉浏览器自带的“自动刷新”功能，让你完全掌控表单提交后的处理流程，而不是阻止你的自定义代码。

内容的提问来源于stack exchange，提问作者Noc er Gal