用 dataset 或 aria-pressed 维护状态，fetch 请求后以服务端返回的 is_subscribed 为准更新按钮文案和属性，并立即禁用防连点。
点击后切换“关注/取消关注”状态的按钮怎么写
核心是用 JavaScript 控制按钮文本和行为，同时避免重复绑定事件或状态错乱。HTML 本身不能“记住”状态，必须配合 JS 维护一个明确的开关变量或读取 DOM 当前文本/属性来判断下一步动作。
常见错误现象：click 事件被多次绑定导致点一次执行两次；按钮文字变成“取消关注”后，再点还是发“关注”请求；没处理网络请求失败时的状态回滚。
- 用
dataset或aria-pressed存状态比靠文本判断更可靠（比如用户改了中文文案，逻辑就崩了） - 推荐初始 HTML 带
data-subscribed="false"，JS 里只读写这个属性 - 按钮禁用状态（
disabled）要在请求发出时立即设上，防止连点
<button id="subscribe-btn" data-subscribed="false">关注话题</button>
如何用 fetch 发请求并正确更新按钮状态
关注/取消关注本质是两个不同 HTTP 方法（通常是 POST 和 DELETE）或同一个接口带不同参数。关键不是“怎么发请求”，而是“发完怎么安全切状态”。
使用场景：用户点击按钮 → 触发请求 → 成功则翻转状态、更新文案；失败则还原按钮、提示错误（但不刷新页面）。
立即学习“前端免费学习笔记（深入）”；
- 不要在
then()里直接改innerText，先确保响应是成功的（检查response.ok） - 请求前保存原始状态，失败时用它还原，而不是靠猜“现在应该是关注还是取消”
- 如果后端返回的是统一 JSON 格式（如
{ success: true, is_subscribed: false }），优先以这个为准，而非前端 toggle
btn.addEventListener('click', async () => {
const isSub = btn.dataset.subscribed === 'true';
const url = isSub ? '/api/unsubscribe' : '/api/subscribe';
const method = isSub ? 'DELETE' : 'POST';
btn.disabled = true;
try {
const res = await fetch(url, { method });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const json = await res.json();
btn.dataset.subscribed = json.is_subscribed;
btn.textContent = json.is_subscribed ? '取消关注' : '关注话题';
} catch (e) {
alert('操作失败，请重试');
} finally {
btn.disabled = false;
}
});
为什么用 aria-pressed 比纯 CSS 类更合适
可访问性（a11y）不是加分项，是按钮功能正常的基础。屏幕阅读器需要知道这个按钮当前是“已按下”还是“未按下”，而仅靠 class="active" 或颜色变化无法传达语义。
参数差异：aria-pressed="true" 明确告诉辅助技术“这是一个切换按钮，当前处于激活态”，浏览器也会自动加上对应的角色（button[role="switch"] 的变体）。
- 设置
aria-pressed后，记得同步更新textContent和dataset，三者保持一致 - 不要只设
aria-pressed而忽略视觉反馈（比如没加 hover/focus 样式） - 服务端渲染时，如果已知用户已订阅，初始就要写上
aria-pressed="true"，否则首屏对屏幕阅读器就是错的
移动端点击区域小、容易误触怎么办
按钮默认尺寸在手机上太小，尤其嵌在列表里时，用户拇指一滑就点歪或连点两次。这不是样式问题，是交互容错设计。
性能 / 兼容性影响：加 padding 或 min-width 不影响 JS 逻辑，但能显著降低误操作率；而用 touch-action: manipulation 可减少 iOS 上 300ms 延迟，让点击反馈更及时。
- 最小点击区域建议 ≥ 44×44px（iOS 人机指南），可用
padding+min-height实现 - 给按钮加
user-select: none，防止长按触发文字选择（干扰操作） - 如果按钮在滚动容器内，确保没加
touch-action: none这类阻断手势的样式
is_subscribed 字段和前端状态不同步——比如用户刚在另一个标签页操作过，或者缓存没清。别假设“我点了一次，状态就一定变了”，永远以服务端响应为准。 
