Tab键卡在子元素求助：无法遍历含tabindex=0的子元素

核心问题 #

父容器设置tabindex="0"会让容器本身成为可聚焦元素，和子元素的tabindex="0"冲突，打乱浏览器默认的焦点遍历顺序，导致Tab键无法正常遍历子元素。

解决方案 #

1. 移除父容器的tabindex="0" #

如果父容器不需要本身获得焦点，直接去掉它的tabindex属性。浏览器默认会按DOM顺序遍历内部可聚焦的子元素（只要子元素tabindex="0"或是原生可聚焦元素，比如按钮、输入框）。

2. 若父容器必须保留可聚焦性 #

如果父容器需要被聚焦（比如作为组件容器），给父容器设置tabindex="-1"——这样它可以通过JS主动聚焦，但不会加入默认的Tab遍历序列，子元素保留tabindex="0"即可正常遍历。

3. 清理干扰焦点逻辑的代码 #

之前使用的stopPropagation()如果在focus/blur事件中调用，会干扰浏览器的焦点管理逻辑，直接删除这类代码，确保焦点事件正常冒泡。

示例代码 #

<!-- 写法1：父容器无tabindex -->
<div class="parent-container">
  <div tabindex="0">子元素1</div>
  <div tabindex="0">子元素2</div>
  <div tabindex="0">子元素3</div>
</div>

<!-- 写法2：父容器用tabindex="-1" -->
<div class="parent-container" tabindex="-1">
  <div tabindex="0">子元素1</div>
  <div tabindex="0">子元素2</div>
  <div tabindex="0">子元素3</div>
</div>

额外注意点 #

• 不要给子元素设置大于0的tabindex（比如1、2），这会强制改变遍历顺序，导致逻辑混乱，tabindex="0"是让元素按DOM顺序加入默认遍历序列的正确值。
• 确保子元素没有被display: none、visibility: hidden或pointer-events: none这类属性影响，这些会让元素无法获得焦点。

内容的提问来源于stack exchange，提问作者Mary Jo