表单提交后页面为什么会自动刷新？

书生シ紫晨提问于 2026-03-02 23:25:19 阅读 4

交互

我在用原生 JavaScript 处理表单提交，但每次点击提交按钮，页面都会自动刷新，导致我刚填的数据全没了。明明我已经加了 event.preventDefault() 啊，怎么还是不行？

这是我的代码：

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(e) {
  // 阻止默认行为
  e.preventDefault();
  console.log('提交数据');
});

HTML 结构很简单，就是一个普通表单，按钮 type 是 submit。难道是监听没生效？还是我哪里漏了？

表单交互

我来解答赞 2 收藏

反馈

1 条解答

端木文仙 Lv1

你这代码本身没毛病，e.preventDefault() 的位置也对。页面还是刷新，多半是下面这几个坑，按顺序排查一下。

第一，JS 代码执行顺序的问题。如果你的 script 标签放在了表单 HTML 前面，document.querySelector('#myForm') 选不到元素，返回 null，事件监听自然没绑上。点击提交按钮后，表单就按默认行为提交了，页面刷新。解决办法是把 script 放到 body 底部，或者用 DOMContentLoaded 包一下。

第二，选择器写错了或者表单 ID 不对。打开控制台，输入 document.querySelector('#myForm') 看看能不能选中元素。如果返回 null，说明选择器和 HTML 对不上。

第三，JS 代码中途报错了。console.log 之前如果有其他代码报错，e.preventDefault() 虽然在第一行，但如果整个脚本加载就出问题，那也没戏。看下控制台有没有红色报错。

给你一个完整可用的例子，对照着检查：

快速调试技巧：在 form.addEventListener 前面加个 console.log(form)，看看输出是不是 null。如果是 null，就是选不到元素的问题，代码位置挪一下就行。

2026-03-02 23:26