preventDefault()函数失效：点击表单提交按钮页面仍刷新求助

数据老陈

2026-8-25

问题原因与解决方法

你的核心问题是把submit事件绑定错了元素：submit事件是<form>元素的专属事件，不是提交按钮的。你绑定在按钮上的submit监听器根本不会被触发，所以preventDefault()完全没起作用，页面自然会执行表单默认的提交刷新行为。

修正方案一（推荐）：给表单绑定`submit`事件

给表单添加一个ID，把事件监听器绑定到表单上，这样无论是点击提交按钮还是按回车提交，都能触发监听逻辑：

<form id="numberForm">
  <input type="number" min="1" max="100" required>
  <input type="submit" id="t">
</form>

document.getElementById("numberForm").addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("test");
  // 这里添加你的客户端后续处理逻辑，比如验证通过后的操作
});

修正方案二：给按钮绑定`click`事件

如果一定要绑定在按钮上，监听它的click事件，但要先检查表单是否通过验证：

document.getElementById("t").addEventListener("click", function(event) {
  const form = this.closest('form');
  // 先验证表单是否符合要求
  if (form.checkValidity()) {
    event.preventDefault();
    console.log("test");
    // 执行验证通过后的逻辑
  }
});

不过这种方法不如第一种通用，因为用户在输入框按回车提交时，这个click监听器不会触发。