data-*属性是数据容器而非开关，仅用于挂载自定义数据供javascript读取判断；需手动检查dataset值并控制行为，不能替代disabled等原生属性。
data-* 属性不是开关，是数据容器
HTML 的 data-* 属性本身不会触发任何行为，也不能直接“控制”按钮功能。它只是把自定义数据挂载在元素上，供 JavaScript 读取后做逻辑判断或参数传递。常见误解是写个 data-enabled="false" 就以为按钮自动失效了——其实点击事件照常触发，除非你手动检查这个值并 return 或 preventDefault()。
典型错误现象：button[data-enabled="false"] { opacity: 0.5; } 只改样式，用户仍可点击；或者没在 JS 里读取 dataset.enabled 就直接执行操作。
- 使用场景：动态切换按钮行为（如“关注/已关注”）、传参避免全局变量、服务端渲染后前端轻量接管
- 命名规范：用小写和短横线，
data-user-id合法，data-userId会被转成dataset.userid（全小写） - 读取方式统一用
element.dataset.xxx，不要用getAttribute('data-xxx')——后者返回字符串，前者自动转换数字/布尔（"true"→true，"42"→42）
给按钮加 data 属性后，JS 怎么读取并响应
关键不是“怎么加”，而是“加完怎么用”。比如一个删除按钮需要确认目标 ID 和是否跳转：
<button type="button" data-action="delete" data-item-id="123" data-redirect="true"> 删除 </button>
对应的 JS 需主动提取并决策：
- 监听点击时，用
event.target.dataset.action判断类型 -
dataset.itemId是字符串"123"，需parseInt()或直接用于 API 请求（多数接口接受字符串 ID） -
dataset.redirect === "true"才跳转，不能直接当布尔用（if (dataset.redirect)对任意非空字符串都为真） - 建议封装成函数：
handleButtonAction(event) { const btn = event.target; const { action, itemId, redirect } = btn.dataset; ... }
data 属性和 disabled 属性别混用
disabled 是原生表单控件状态，影响可聚焦、可点击、提交行为；data-disabled 只是标记，对浏览器无意义。两者常被误配对：
- 想禁用按钮？直接设
btn.disabled = true，别只改data-disabled="true" - 想保留禁用状态但允许 JS 检查？可以同时设置：
<button disabled data-disabled="true"></button>，这样样式 + 行为 + 状态标记三者一致 - 用 CSS 选中：
button[data-disabled="true"] { pointer-events: none; }不可靠——它不阻止键盘触发，也不影响表单提交逻辑 - 性能注意：频繁读写
dataset不会重排重绘，但大量按钮都靠它驱动逻辑，建议缓存解析结果（如首次点击时解析一次，存在btn._parsedData上）
服务端渲染时 data 属性的坑
Node.js 模板（如 EJS、Nunjucks）或 PHP 输出 HTML 时，容易忽略转义和类型问题：
- 用户昵称含引号？
<button data-name="<%= user.name %>"></button>会破坏 HTML 结构，必须用escapeHtml()类函数处理 - JSON 数据嵌套？别拼字符串：
data-config='{"limit":5}'易出错；改用JSON.stringify()并包裹：data-config="" - IE11 兼容性：
dataset支持 IE11+，但旧版 IE 用getAttribute()更稳妥（不过现在基本不用考虑） - SEO 和可访问性：screen reader 不读
data-*，别把关键提示文字塞进去（如错误信息、操作说明）
最常被忽略的一点：data 属性值始终是字符串，哪怕你写了 data-count="0"，JS 里拿到的是 "0"，不是数字 0，也不是 false。类型混淆导致的逻辑 bug 很难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
