必须用<button type="button">实现点赞，因其自带焦点、语义和交互能力；div/a/span均导致键盘不可聚焦、屏幕阅读器误读、移动端跳过等问题，且需手动补全无障碍属性与事件监听。
直接用 <button type="button">，别套 <div> 或 <a> —— 否则键盘不可聚焦、屏幕阅读器读不出操作意图，后续所有交互和无障碍补救都徒劳。
为什么必须用 button 而不是 div 写点赞结构
语义错误会直接导致三类问题：键盘用户按 Tab 无法聚焦按钮；移动端双指滑动时跳过该元素；屏幕阅读器把“点赞”读成“一段文字”而非“可执行操作”。button 自带 tabindex="0"、role="button" 和空格/回车触发能力，省掉手动补 tabindex、role、keydown 监听的全部风险。
常见翻车写法：
-
<div onclick="like()">?—— 没有焦点、无键盘支持、onclick 不防重复点击 -
<a href="#" onclick="like(); return false;">?—— 触发页面跳转副作用，SEO 误判为导航链接 -
<span class="btn-like">?—— 完全不可聚焦，无障碍测试直接失败
正确最小结构示例：
立即学习“前端免费学习笔记（深入）”；
<button type="button" data-post-id="123" aria-label="点赞这篇文章">? 42</button>
注意：type="button" 防止意外提交表单；data-post-id 提供服务端所需上下文；aria-label 是屏幕阅读器唯一能依赖的描述来源。
data-post-id 和 data-liked 怎么配对使用才不冲突
这两个属性分工明确：data-post-id 是资源标识（只读），data-liked 是用户本地状态（可变）。不能混用或互相覆盖，否则服务端校验和前端切换逻辑会错乱。
典型错误：
- 把
data-liked设成布尔值：data-liked="true"—— HTML 属性值全是字符串，JS 里el.dataset.liked === true永远为false - 用
data-id替代data-post-id—— 多个功能共存时（如点赞+评论+分享），ID 语义模糊，后端路由和前端 selector 都难维护 - 点击后只改
textContent，不更新dataset.liked—— 下次点击无法判断当前状态，取消点赞逻辑直接失效
推荐写法：
<button type="button" data-post-id="123" data-liked="false">? 42</button>
JS 中读取与更新：
const btn = document.querySelector('[data-post-id="123"]');<br>const isLiked = btn.dataset.liked === 'true';<br>btn.dataset.liked = 'true'; // 字符串赋值
点赞数显示区域要不要单独抽成一个元素
要。把数字和按钮拆开，才能独立控制更新、动画和语义。合在 button 里会导致：数字变化触发按钮重绘影响性能；无法给数字加 aria-live="polite" 让读屏软件感知变化；CSS 动画缩放时数字被拉伸变形。
结构建议：
<div class="like-wrapper"><br> <button type="button" data-post-id="123" data-liked="false" aria-label="点赞这篇文章">?</button><br> <span class="like-count" aria-hidden="true">42</span><br></div>
关键点：
-
aria-hidden="true"确保数字不被读屏器重复播报（按钮已有aria-label） - 数字用
<span>而非<div>，避免块级元素破坏行内布局 - 服务端返回新总数时，只更新
.like-count的textContent，不碰按钮本身
移动端点击延迟和连点怎么防
iOS Safari 和旧版 Android 浏览器对 click 事件有约 300ms 延迟，且原生 button 在快速连点时可能触发多次。不能只靠 CSS pointer-events: none，它不阻止 touch 事件冒泡，也不反馈加载态。
实操方案：
- 监听
touchstart替代click，立即禁用按钮：btn.disabled = true - 请求发出去后，再加
loading类控制样式（比如加旋转图标、降低透明度） - 响应成功后，先更新
dataset.liked和.like-count，再恢复btn.disabled = false - 失败时，必须还原按钮状态：
btn.disabled = false; btn.dataset.liked = 'false'，否则用户以为卡死了
别忽略视觉反馈：没有 loading 文字或图标，用户会在 300ms 延迟里反复点击，导致后端收到多条重复请求——而服务端防重逻辑（如唯一索引）只能报错，前端 UI 却没回滚，状态彻底失真。
