内联 onclick 与 data-* 混用时 dataset 读不到值，因内联事件在全局作用域执行，event.target 才能正确访问 dataset.userid；contenteditable 元素默认可聚焦，显式设 tabindex="0" 可能引发焦点跳失；hidden 属性使元素完全脱离交互状态，onclick 不会触发。
直接用 onclick 这类事件属性写在 HTML 里，看似省事，但和 id、data-*、tabindex 等全局属性混用时，很容易触发隐性冲突——比如焦点顺序错乱、自定义数据读不到、甚至事件根本没绑上。
onclick 和 data-* 一起用，为什么 dataset 读不到值？
常见现象是：HTML 中写了 <button onclick="handleClick()" data-user-id="123">点我</button>，但 JS 函数里 event.target.dataset.userId 是 undefined。
- 根本原因不是事件没触发，而是
dataset只从当前元素 DOM 树中读取，而内联onclick字符串是在全局作用域执行的，this不指向目标元素，event参数也得手动传 - 正确做法是把
event显式传入：<button onclick="handleClick(event)" data-user-id="123"></button>，函数里再用event.target.dataset.userId - 更稳妥的方式是放弃内联写法，改用
addEventListener，天然带event和正确的this上下文 - 注意连字符转驼峰规则：
data-user-id→dataset.userId，不是dataset.user-id（语法错误）或dataset.user_id
tabindex + contenteditable 混用导致焦点跳失
给一个 contenteditable 元素加了 tabindex="0"，本意是让它可聚焦、可 Tab 切换，结果发现按 Tab 键时焦点直接跳过它，或者卡在别的地方不动。
-
contenteditable元素默认已参与焦点流（相当于隐式tabindex="0"），再显式加tabindex="0"不会增强行为，反而可能因浏览器解析顺序引发歧义 - 若想禁用编辑但保留焦点能力，应设
contenteditable="false"+tabindex="0"；若只想禁用焦点，直接删掉tabindex或设为负值（如tabindex="-1"） - IE11 和旧版 Safari 对
contenteditable的tabindex处理不一致，建议在需要精确控制焦点顺序的场景中，统一用 JS 调用element.focus()主动管理
hidden 属性让 onclick 完全失效？
页面上有个按钮加了 hidden，但 JS 里仍调用了 button.onclick = handler，结果点击无反应，检查发现事件监听器确实存在，但就是不触发。
-
hidden不只是视觉隐藏，它会让元素**完全脱离可交互状态**：无法获得焦点、无法响应鼠标事件、无法被屏幕阅读器访问 - 这不是 bug，是规范行为。即便你用 JS 绑定了
onclick，只要元素处于hidden状态，浏览器就不会派发任何用户交互事件 - 如果逻辑上需要“暂存”交互能力，改用 CSS
display: none或visibility: hidden；只有真正要语义化地声明“此内容当前不相关”，才用hidden - 动态切换时注意：从
hidden移除后，元素不会自动恢复焦点能力，需手动调用focus()（如果需要）
真正难处理的不是单个属性怎么写，而是它们组合后的副作用——比如 data- 值在 SSR 渲染时被转义破坏、tabindex 在 shadow DOM 内部失效、contenteditable 配合 spellcheck="false" 在 iOS 上仍弹出纠错栏。这些边界情况不会报错，只会让交互悄悄失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
