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