data-属性不能控制alert()的显隐，仅能通过JS读取/写入来辅助判断是否触发或禁用弹窗，如用data-alert-disabled标记按钮是否已弹出警告。
data- 属性不能直接控制 alert() 的显示或隐藏
浏览器原生的 alert() 是同步阻塞式弹窗，没有 API 控制其状态（比如“打开中”“已关闭”），也不能通过 HTML 属性动态干预。所谓“用自定义属性控制警告对话框状态”，本质是**用 data- 属性辅助 JS 判断是否该触发 alert()，或记录上次交互结果**，而不是真正绑定状态。
常见错误现象：data-alert-shown="true" 写在元素上，但 JS 里没读取、没更新，属性就只是静态字符串，对弹窗毫无影响。
-
data-属性只用于存储与元素相关的元信息，必须配合 JS 主动读取（element.dataset.alertShown）和写入（element.dataset.alertShown = "false"）才起作用 - 若想“禁止重复弹出”，需在触发前检查该属性值，并在
alert()后手动更新它 - 注意：
dataset自动将短横线转为驼峰（data-alert-shown→element.dataset.alertShown）
用 data-alert-disabled 阻止重复触发的典型写法
适用于按钮点击后弹一次警告、且不希望用户狂点多次就弹多次的场景。核心是把状态存在按钮自身上，而非全局变量。
<button id="submit-btn" data-alert-disabled="false">提交</button>
对应 JS：
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', () => {
if (btn.dataset.alertDisabled === 'true') return;
alert('请确认操作！');
btn.dataset.alertDisabled = 'true'; // 立即禁用
});
- 必须用字符串比较（
=== 'true'），因为dataset值永远是字符串 - 不要用布尔值
true/false直接赋值，否则dataset.alertDisabled会变成"true"或"false"字符串，但逻辑判断容易出错 - 如果需要恢复可点击（比如表单校验失败后允许重试），记得在适当位置重置：
btn.dataset.alertDisabled = 'false'
为什么不用 disabled 属性代替 data-？
直接设 btn.disabled = true 虽然也能防连点，但它会让按钮视觉置灰、失去焦点、无法触发 focus 等事件——而很多场景下你只想“逻辑上禁用弹窗”，并不想锁死整个按钮交互（比如还要支持键盘 Enter 触发、或配合 CSS 动画反馈）。
-
disabled是表单控件的原生行为控制，影响可访问性和样式渲染 -
data-alert-disabled是纯业务语义标记，完全由你决定何时读、何时写、何时忽略 - 性能无差异，但语义更清晰：一个管“能不能点”，一个管“还该不该弹警告”
警惕 data- 和 DOM 更新时机的坑
在 Vue/React 等框架中，直接修改 dataset 不会触发响应式更新；而在原生 JS 中，修改 dataset 虽然会同步反映到 HTML（outerHTML 可见），但不会触发 DOMSubtreeModified 这类废弃事件，也**不会自动通知 MutationObserver**（除非监听 attributes 并过滤 data- 开头的属性）。
- 别指望改了
data-alert-shown后，CSS 能靠[data-alert-shown="true"]自动变样式——alert()是阻塞的，JS 卡在那儿，样式根本来不及重绘 - 如果真需要视觉反馈（如按钮变色表示已警告过），应在
alert()调用前就更新 class 或 style，而不是依赖data-属性变化 - 服务端渲染时写死
data-alert-disabled="true"没意义，因为没 JS 执行，属性只是摆设
实际能靠 data- 控制的，只有“要不要执行 alert() 这一行代码”的开关逻辑。其余所有状态同步、UI 反馈、跨组件通信，都得另想办法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
