表单外部submit按钮的preventDefault失效，页面仍刷新求助

核心问题 #

你给提交按钮绑定了submit事件，但实际上submit事件是由表单元素触发的，按钮本身不会触发该事件。所以你的event.preventDefault()根本没被执行，页面自然会按默认行为刷新。

解决方案 #

把submit事件监听绑定到表单元素上，同时在处理函数里加入清空输入框的逻辑：

修改后的JavaScript代码：

document.addEventListener("DOMContentLoaded", () => {
  const addressForm = document.querySelector("#address_form");
  addressForm.addEventListener("submit", (event) => {
    event.preventDefault();
    
    const emailInput = document.querySelector("#email");
    const firstNameInput = document.querySelector("#first_name");

    // 打印输入值
    console.log("Email:", emailInput.value);
    console.log("First Name:", firstNameInput.value);

    // 清空输入框
    emailInput.value = "";
    firstNameInput.value = "";
  });
});

为什么原来的代码不生效？ #

当你点击type="submit"且指定了form="address_form"的按钮时，浏览器会自动触发对应表单的submit事件，而非按钮自身的submit事件。你之前的监听绑定在按钮上，这个事件从未被触发，所以阻止默认行为的代码没起作用，表单还是按默认方式提交并刷新页面。

补充说明 #

• 你的HTML结构没问题，按钮的form属性正确关联了表单，无需修改。
• 不需要额外使用stopPropagation()或stopImmediatePropagation()，只要正确阻止表单的默认提交行为即可。

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