当 <li> 和其内部 <button> 均需响应键盘事件时，因事件冒泡和焦点机制问题，常导致按键行为混淆；本文详解如何通过 tabindex 控制可聚焦性，并利用 event.key 和 event.target 精准区分触发源，实现事件逻辑解耦。

当 `

` 和其内部 `` 均需响应键盘事件时，因事件冒泡和焦点机制问题，常导致按键行为混淆；本文详解如何通过 `tabindex` 控制可聚焦性，并利用 `event.key` 和 `event.target` 精准区分触发源，实现事件逻辑解耦。

在默认 HTML 行为中，<li> 元素不具备键盘可聚焦性，也不会原生触发 keydown 事件——除非它被显式赋予 tabindex 属性（如 tabindex="0" 或 tabindex="-1"）。你当前代码中 <li onKeyDown={handleLiClick}> 能触发回调，恰恰说明该 <li> 已具备可聚焦能力（很可能已设置 tabindex，或父容器/样式间接影响了焦点流）。

要真正分离 <li> 和 <button> 的 onKeyDown 行为，需从两个层面协同处理：

✅ 1. 明确焦点归属与事件捕获时机

• <button> 是原生可聚焦、可键盘交互的元素（如按 Space 或 Enter 触发点击），无需额外 tabindex；
• 若 <li> 需独立响应键盘操作（例如方向键导航、空格展开等），则必须添加 tabindex（推荐 tabindex="0" 使其自然进入 Tab 顺序）：

<li
  id="test"
  tabIndex={0} // ? 关键：使 li 可聚焦，从而接收键盘事件
  onKeyDown={handleLiClick}
>
  <div>Some Random stuff</div>
  <div>
    <button
      onClick={handleButtonClick}
      onKeyDown={handleButtonKeyDown} // ? 可选：显式绑定 button 的 onKeyDown（更清晰）
    >
      <SomeComponent />
    </button>
  </div>
</li>

⚠️ 注意：若未给 <li> 设置 tabindex，其 onKeyDown 实际不会被触发——此时你观察到的“触发”很可能是事件从 <button> 冒泡上来的结果。

✅ 2. 在事件处理器中精准识别触发源与意图

即使两者都绑定了 onKeyDown，也可通过以下方式可靠区分：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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

• 用 event.target 判断实际触发元素：

  const handleLiClick = (e: KeyboardEvent) => {
    if (e.target !== e.currentTarget) return; // 仅处理直接作用于 li 的事件（非冒泡）
  
    if (e.key === 'ArrowDown') {
      console.log('LI: move focus down');
      e.preventDefault(); // 阻止默认滚动等行为
    }
  };
  
  const handleButtonKeyDown = (e: KeyboardEvent) => {
    // button 默认响应 Enter/Space，但可扩展其他逻辑
    if (e.key === 'Escape') {
      console.log('BUTTON: close popup');
      e.stopPropagation(); // ? 阻止冒泡到 li，避免重复响应
    }
  };

• 统一入口 + 条件分发（推荐用于简化逻辑）：

  const handleKeyDown = (e: KeyboardEvent) => {
    const isButton = e.target instanceof HTMLButtonElement;
    const isLi = e.target === e.currentTarget;
  
    if (isButton) {
      if (e.key === 'Enter' || e.key === ' ') {
        handleButtonClick(e); // 复用原有点击逻辑
      } else if (e.key === 'Tab') {
        // 自定义 button 特有行为
      }
      return;
    }
  
    if (isLi) {
      switch (e.key) {
        case 'ArrowUp':
        case 'ArrowDown':
          e.preventDefault();
          handleLiNavigation(e.key);
          break;
        case ' ':
          e.preventDefault();
          handleLiToggle();
          break;
      }
    }
  };

✅ 3. 关键实践建议

• ✅ 始终调用 e.preventDefault() 当你拦截了浏览器默认行为（如空格在 button 上触发点击、方向键滚动页面）；
• ✅ 使用 e.stopPropagation() 仅在明确需要阻断冒泡时（如 button 按 Esc 不应再触发 li 的任何逻辑）；
• ✅ 优先使用 e.key（语义化，如 "Enter"、" "）而非 e.code（物理键位，如 "Space"），更符合可访问性规范；
• ✅ 为所有可交互容器（如 <li>）添加 role="listitem" 和必要 ARIA 属性（如 aria-expanded），确保屏幕阅读器正确理解上下文。

通过合理设置 tabindex、精准判断 event.target 与 event.key，并善用 preventDefault / stopPropagation，即可干净、健壮地分离嵌套元素的键盘事件逻辑，兼顾功能性和无障碍体验。