箭头键控制<a>标签焦点仅触发一次，功能异常求助

嘿，我完全懂你遇到的这个困扰——想用上下箭头在6个列表项的链接间切换焦点，但每次按箭头键时.focus()只生效一次，没法正常上下移动是吧？咱们来把这个问题捋清楚，然后搞定它。

问题根源分析 #

大概率是这两个原因导致的：

• 没有正确跟踪当前焦点的索引：你可能没维护一个变量来记录当前聚焦的是第几个链接，每次按键时没法正确更新焦点位置。
• 未阻止浏览器默认行为：按下箭头键时，浏览器会默认触发页面滚动，这会干扰你的焦点切换逻辑，导致.focus()的效果被覆盖或者只触发一次。

完整解决方案代码 #

下面是经过验证的实现，完全符合你的预期需求：

// 获取所有列表项中的a标签
const linkItems = document.querySelectorAll('li a');
// 跟踪当前聚焦的索引，初始设为-1表示无焦点
let currentFocusIndex = -1;

// 键盘事件处理函数
function handleKeyNavigation(e) {
    // 只处理上下箭头和回车键
    if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key)) return;

    // 阻止浏览器默认行为（比如滚动），避免干扰焦点切换
    e.preventDefault();

    switch(e.key) {
        case 'ArrowDown':
            // 下移：索引加1，最大不超过最后一个项的索引（5，对应6个列表项）
            currentFocusIndex = Math.min(currentFocusIndex + 1, linkItems.length - 1);
            break;
        case 'ArrowUp':
            // 上移：索引减1，最小不小于0
            currentFocusIndex = Math.max(currentFocusIndex - 1, 0);
            break;
        case 'Enter':
            // 回车键触发链接点击，仅当存在聚焦项时生效
            if (currentFocusIndex !== -1) {
                linkItems[currentFocusIndex].click();
            }
            return; // 回车后无需重复聚焦
    }

    // 让对应索引的链接获得焦点
    linkItems[currentFocusIndex].focus();
}

// 给document绑定键盘事件
document.addEventListener('keydown', handleKeyNavigation);

// 可选：页面加载后让第一个链接自动获得焦点
// currentFocusIndex = 0;
// linkItems[currentFocusIndex].focus();

关键细节说明 #

• 索引边界控制：用Math.min和Math.max确保索引始终在0到5之间（对应6个列表项），绝对不会超出范围。
• 阻止默认行为：e.preventDefault()是核心，它能避免浏览器的默认滚动行为干扰焦点切换，确保每次.focus()都能正常生效。
• 回车键处理：只有当存在聚焦项时才触发点击，避免无焦点时的无效操作。

如果你的HTML结构是类似下面这样的，这个代码直接就能用：

<ul>
    <li><a href="#item1">项目1</a></li>
    <li><a href="#item2">项目2</a></li>
    <li><a href="#item3">项目3</a></li>
    <li><a href="#item4">项目4</a></li>
    <li><a href="#item5">项目5</a></li>
    <li><a href="#item6">项目6</a></li>
</ul>

你可以把这段代码放到你的项目里试试，应该就能实现按下上下箭头平滑切换焦点，且不会超出列表范围，回车键正常访问链接的效果了。

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