html 表单提交时默认会触发表单提交行为，导致页面整页重载；若未显式阻止该默认行为，即使仅调用 javascript 函数（如 checkanswer()），页面仍会刷新。

html 表单提交时默认会触发表单提交行为，导致页面整页重载；若未显式阻止该默认行为，即使仅调用 javascript 函数（如 checkanswer()），页面仍会刷新。

在开发交互式网页（如你正在制作的三角函数练习小游戏）时，页面无故刷新是一个高频但易被忽视的问题。根本原因在于：HTML

元素在用户触发提交（例如按回车键或点击提交按钮）时，会自动执行标准表单提交流程——向当前 URL 发送 GET 请求（或 POST，取决于 method 属性），从而强制浏览器重新加载页面。

你的代码中虽未显式写出

的 action 或 method，但只要存在

标签且内部包含可提交控件（如 ），浏览器就将其视为可提交表单。而你在 checkAnswer() 中并未绑定到任何防刷新机制，因此每次用户输入后按 Enter 键，表单即提交 → 页面刷新 → 所有 JS 状态（如 currentStreak、startTime、currentAnswer）全部重置。

✅ 正确解法是 阻止表单的默认提交行为，仅执行自定义逻辑：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

? 补充说明：event.preventDefault() 必须在事件处理函数中调用，且需确保 event 对象可用。使用内联 onsubmit 时，浏览器自动注入 event 参数；更推荐的现代写法是分离 HTML 与 JS：

// 在 script 标签或外部 JS 文件中
document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault(); // 关键：阻止默认提交
  checkAnswer();
});

⚠️ 注意事项：

• 不要遗漏 event.preventDefault() —— 即使 checkAnswer() 逻辑正确，缺少它仍会导致刷新；
• 避免在 checkAnswer() 内部调用 location.reload() 或隐式触发表单提交（如误将 写成 ）；
• 若使用 提交，请明确设置 type="button"（而非默认的 "submit"），否则也会触发表单提交；
• 调试技巧：在 checkAnswer() 开头添加 console.log('checkAnswer called');，若页面刷新前未见该日志，即可确认是表单默认行为导致，而非 JS 报错。

通过这一改动，你的三角函数练习游戏将稳定运行，计时、连击、分数等状态得以持续维护，用户体验显著提升。记住：所有基于表单交互的前端应用，都应主动控制提交行为——这是 Web 开发的基石实践之一。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！