应将每个导航项设为语义完整、可聚焦的块级链接，通过display: block和padding扩展热区，确保键盘可访问与移动端44×44px最小点击面积。
直接让整个导航栏容器（比如 ）响应点击，不可靠——它不天然支持焦点、键盘操作，也容易漏点或误触。真正可行的方案是：把每个导航项做成语义完整、尺寸可控、可聚焦的可点击单元，再通过 CSS 扩展其热区。
为什么不能只给
因为 是流式容器，本身不声明交互意图；点击事件会冒泡，但无法保证点击空白处（比如行高留白、左右 padding 区域）触发预期逻辑；更重要的是，键盘用户按 Tab 时焦点不会停在 上，Enter 或 Space 也不会触发，这违反 WCAG 基本要求。
常见错误现象：onclick 在桌面看似有效，但在 iOS Safari 或 Android Chrome 上点击无反应、300ms 延迟明显、屏幕阅读器完全忽略该区域。
- 别用
作为主交互入口 - 别依赖父容器捕获所有子元素点击来统一处理——
event.target可能是、等非链接元素，判断逻辑极易出错 - 如果真要用 JS 绑定，必须配合
tabindex="0"和手动处理keydown，成本远高于正确结构
可点击区域的本质是「链接的渲染盒」。默认 是 inline 元素，点击热区仅覆盖文字本身；只要让它变成 display: block 或 inline-block，并填充父容器空间，热区就自然扩大。
示例结构：
<nav><ul>
<li><a href="/home" style="display: block; padding: 12px 24px;">首页</a></li>
<li><a href="/about" style="display: block; padding: 12px 24px;">关于</a></li>
</ul></nav>
- 每个
都要显式设display: block（或inline-block），否则 padding 不生效 - 用
padding扩展热区，别依赖font-size或line-height撑开——它们不增加可点击面积 - 移动端必须保障最小 44×44px，
padding: 12px 24px在 1x 屏下刚好达标（12×2 + 字高≈24，24×2=48）
避免外边距（margin）污染点击区域
当 错误写法： 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 正确做法是：移除内部块级元素的 margin，改由 下拉菜单常被设为 必须做： 最易被忽略的一点：即使视觉上整个导航栏“看起来”可点，只要某个 内部嵌套 、margin 时， 的渲染边界会被撑大，导致点击空白处也能触发——这不是你想要的“整栏可点”，而是失控的盒模型副作用。
<a href="/home"><h4 style="margin: 20px 0;">首页</h4></a>
自身的 padding 控制间距。
margin-top/margin-bottom 调整垂直位置，统一用 的 padding
vertical-align 或 flex 容器替代 margin 的 border-box 完全覆盖目标区域，没有 margin 外溢响应式下拉菜单的点击区域陷阱
position: absolute，此时它的父 若未设 position: relative，子菜单可能脱离热区范围；更关键的是，子菜单项若没设 display: block 和足够 padding，手指点下去很容易滑脱。
加 position: relative，确保子菜单定位锚点准确 同样设 display: block + padding，且 min-height: 44px
style="touch-action: manipulation;"，禁用双击缩放延迟visibility: hidden + opacity: 0，别用 display: none——否则键盘焦点进不去 缺少 href 或 tabindex，它在键盘导航中就是不可达的——可点击 ≠ 可访问。真正的“整栏可点”，是以每个链接为原子单位，逐个夯实语义、样式与交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
