当 <li> 和其内部 <button> 均需响应键盘事件时，因事件冒泡与焦点机制导致行为冲突；本文详解如何通过 tabindex 控制可聚焦性，并利用 event.key 和 event.stopPropagation() 精准分离事件处理逻辑。

当 `

` 和其内部 `` 均需响应键盘事件时，因事件冒泡与焦点机制导致行为冲突；本文详解如何通过 `tabindex` 控制可聚焦性，并利用 `event.key` 和 `event.stoppropagation()` 精准分离事件处理逻辑。

在 React（或原生 DOM）中，<li> 默认不可聚焦，因此不会主动触发 onKeyDown 事件——除非显式赋予其可聚焦能力。你观察到的“onKeyDown 触发在 <li> 而非 <button>”现象，本质源于两点：一是 <li> 被设为可聚焦（如添加了 tabindex），二是键盘事件遵循捕获 → 目标 → 冒泡流程，且 <button> 作为 <li> 的子元素，在获得焦点时本应优先响应自身 onKeyDown；但若未为 <button> 显式绑定事件处理器，或事件被父级意外拦截，则行为将不符合预期。

✅ 正确做法：分层控制 + 精准拦截

1. 明确焦点归属，避免隐式干扰

默认情况下，<button> 是天然可聚焦且可键盘交互的元素（支持空格、Enter 触发点击）。而 <li> 需手动启用聚焦能力：

<li
  id="test"
  tabIndex={0} // ? 关键：使 li 可通过 Tab 键获得焦点
  onKeyDown={handleLiClick}
>
  <div>Some Random stuff</div>
  <div>
    <button
      onKeyDown={(e) => {
        // ? 阻止事件冒泡至 li，确保 button 独立处理
        e.stopPropagation();
        // ? 按需响应特定键（如空格/Enter）
        if (e.key === ' ' || e.key === 'Enter') {
          e.preventDefault(); // 防止空格导致页面滚动
          handleButtonClick(e);
        }
      }}
      onClick={handleButtonClick}
    >
      <SomeComponent />
    </button>
  </div>
</li>

? 注意：onClick 本身已兼容键盘（按钮按下 Enter/Space 会自动触发），但 onKeyDown 需手动判断按键并调用对应逻辑，以保证无障碍访问（a11y）一致性。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

2. 在 handler 中按需分流逻辑

handleLiClick 和 handleButtonClick 应各司其职。例如：

立即学习“前端免费学习笔记（深入）”；

const handleLiClick = (e: React.KeyboardEvent) => {
  // 仅响应 li 自身焦点下的特定操作（如方向键导航）
  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
    e.preventDefault();
    navigateListItem(e.key); // 自定义列表导航逻辑
  }
};

const handleButtonClick = (e: React.SyntheticEvent) => {
  // 统一处理点击/键盘激活行为
  console.log('Button activated via', e.type);
  // 执行业务逻辑...
};

⚠️ 关键注意事项

• 不要省略 e.stopPropagation()：否则 <button> 上的 onKeyDown 触发后，事件会向上冒泡至 <li>，造成重复执行；
• 慎用 e.preventDefault()：对 Space 键必须调用（防止滚动），对 Enter 可选；但对方向键等导航键通常需阻止默认行为；
• 语义化优先：若 <li> 仅为容器，不需键盘导航，请移除 tabIndex，让焦点自然落在 <button> 上——这是最符合无障碍标准的做法；
• 测试焦点流：使用键盘 Tab 切换，确认焦点顺序是否符合预期（可通过 outline 样式辅助调试）。

通过合理设置 tabIndex、精准使用 stopPropagation 与按键判断，即可清晰分离嵌套元素的键盘事件职责，兼顾功能完整性与可访问性要求。