纯 HTML 的 mailto: 链接无法实现可靠纠错反馈，因其依赖本地邮件客户端、字段不可控、无校验且移动端基本失效；真正可用的方案是 fetch + 后端接口，mailto: 仅作降级 fallback。

纯 HTML 的 mailto: 链接无法实现“一键纠错反馈”，它只是尝试唤起本地邮件客户端，失败率高、字段不可控、无校验、移动端基本不可用。真正可用的纠错按钮必须走 fetch + 后端接口，mailto: 只能作为降级 fallback。

为什么不能只用 mailto: 做纠错按钮

常见错误是写成：<a href="mailto:support@example.com?subject=纠错&body=页面URL：%20https%3A%2F%2F...&body=问题描述：%20...">纠错</a>。这会带来几个硬伤：

• 用户没装邮件客户端（尤其 iOS、安卓大部分浏览器）→ 点击无反应
• URL 和问题描述拼在 body 里，中文会被编码乱掉，特殊字符（如换行、引号）直接破坏链接
• 无法校验用户是否填了有效内容，也无法防止重复提交
• 你收不到结构化数据：不知道是哪道题、哪个章节、什么浏览器、是否已登录

fetch() 发纠错请求必须带的三件事

纠错按钮本质是一个轻量 POST 请求，目标是你自己的后端接口（比如 Vercel Function 或 Netlify Edge Function）。关键不是“发出去”，而是“发得稳、收得全、可追溯”。

• 必须显式设置 method: "POST"，否则后端收不到 body
• body 要用 JSON.stringify({ page_url: window.location.href, question_id: "q123", feedback: "题目选项C描述错误" })，并配套加 headers: { "Content-Type": "application/json" }
• 必须加 signal: AbortSignal.timeout(8000)，否则网络卡住时按钮永远“转圈”，用户以为没点上

按钮点击后怎么避免重复提交和状态丢失

用户手快连点两下，就可能发两份纠错——后端要处理，前端更要拦住。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 点击后立刻设 button.disabled = true，同时改文案为 button.textContent = "已提交"
• 别只靠 CSS 类名切换状态，要用 dataset.submitted = "true" 存业务状态，刷新后也能读取
• 响应返回后，在 finally 块里恢复按钮可点击性，否则出错后按钮永远灰掉
• 如果后端返回 422 Unprocessable Entity（比如字段超长），要解析响应体里的 errors 字段，用 element.setCustomValidity("请描述更具体些") 触发原生报错气泡

移动端点击失效或延迟？检查这三点

PC 正常、手机要点两下才触发，大概率是移动端事件没对齐。

• 按钮必须设 type="button"，嵌在 <form> 里时不意外触发表单提交
• 加 touch-action: manipulation CSS，告诉浏览器这是个操作型控件，禁用 300ms 延迟
• 确保点击区域 ≥ 44×44px，iOS Safari 对小按钮会误判为滑动；用 min-width 和 min-height 强制兜底

最易被忽略的是：纠错按钮不该替代表单校验，也不该绕过用户当前上下文。比如在答题页弹出纠错，要自动带上当前题干截图 URL、题号、用户作答记录——这些信息必须由 JS 在点击瞬间采集，而不是指望用户手动填写。