JS：表单提交为何不显示123？原因揭秘 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>submit测试</title>
</head>
<body>
<form class="info">
  <input type="text" name="name" />
  <button type="submit">提交</button>
</form>

<script>
// 上面的 JavaScript 代码
    const info = document.querySelector('.info')
    info.addEventListener('submit',function () {
        console.log(123)
    })
</script>

</body>
</html>

问题：按照要求进行代码测试，但是没有在控制台看到123输出结果呢？

分析：

✅ 正确行为预期：

当你点击“提交”按钮时，表单会触发 submit 事件，执行 console.log(123)，控制台应打印 123。

但注意：表单默认会刷新页面（或跳转），这可能导致你刚看到输出就立刻被清空了（因为页面重新加载了）！

🔍 常见原因 & 解决方案：

❌ 问题 1：页面刷新导致控制台日志被清除
  • 表单提交后浏览器默认会重新加载页面。
  • 如果你没勾选“保留日志”（Preserve log），控制台内容会被清空，看起来像“没输出”。

✅ 解决方法：

  1. 在 Chrome DevTools 控制台中，勾选 “Preserve log”（保留日志）。
    • 位置：打开开发者工具 → Console 标签 → 勾选右上角的 ✅ Preserve log。
  2. 或者，在 JS 中阻止默认提交行为：

javascript

info.addEventListener('submit', function (e) {
    e.preventDefault(); // 👈 阻止页面刷新
    console.log(123);
});

加上 e.preventDefault() 后，页面不会跳转/刷新，123 就能稳定显示在控制台。

posted @ 2026-01-08 13:57  chenlight  阅读(2)  评论(0)    收藏  举报  来源