本文详解如何正确阻止 html 表单默认提交行为，解决页面跳顶、重复提交及事件绑定失效等问题，并提供基于 emailjs 的完整可运行示例与关键注意事项。

本文详解如何正确阻止 html 表单默认提交行为，解决页面跳顶、重复提交及事件绑定失效等问题，并提供基于 emailjs 的完整可运行示例与关键注意事项。

在 Web 开发中，表单提交后页面自动刷新并滚动至顶部，是因浏览器执行了

的原生提交行为（即向 action 指定地址发送请求并重载页面）。即使你写了 e.preventDefault()，若该函数未被实际绑定到表单的 submit 事件，或绑定时机/对象错误，仍会触发刷新——这正是你遇到问题的根本原因。

我们来逐层分析并修复你的代码：

✅ 正确绑定事件：确保 preventDefault() 真正生效

你的原始 JS 存在两个关键错误：

1. 事件监听器绑定对象错误：你用 feedbackSubmit.addEventListener('submit', ...)，但 feedbackSubmit 是 元素，而 'submit' 事件只在 上触发；
2. sendEmail 函数体外执行异步逻辑：emailjs.sendForm(...) 被写在函数定义之外，导致页面加载时立即执行（无 e 可 prevent），造成“刷新页就发信”的异常行为。

✅ 正确写法应将 emailjs.sendForm() 放入事件处理函数内部，并监听

元素：

const feedbackForm = document.getElementById('feedback-form');
const feedbackMessage = document.getElementById('feedback-message');

if (feedbackForm && feedbackMessage) {
  const sendEmail = (e) => {
    e.preventDefault(); // ✅ 关键：必须在此处调用，且在表单 submit 事件中

    // ✅ 将 EmailJS 调用移入函数体内
    emailjs
      .sendForm('service_mbynjbg', 'template_xm8yzfd', '#feedback-form', 'SroPTASblucuUzgXt')
      .then(() => {
        feedbackMessage.textContent = 'Message sent successfully :D';
        feedbackForm.reset();

        setTimeout(() => {
          feedbackMessage.textContent = '';
        }, 5000);
      })
      .catch((error) => {
        console.error('EmailJS error:', error);
        feedbackMessage.textContent = 'Message not sent (service error)';
      });
  };

  // ✅ 绑定到 form 元素，而非 button
  feedbackForm.addEventListener('submit', sendEmail);
}

⚠️ 额外注意事项（避坑指南）

• HTML 中 action="" 不影响 preventDefault，但建议显式设为 action="#" 或留空（你当前写法合法）；

• 的 for 属性需匹配对应 input 的 id：你第二处 应改为 ，否则语义错误且影响可访问性；

• 确保 EmailJS SDK 已正确引入（在