JavaScript按钮自动聚焦恢复功能实现问题求助

首先咱们来拆解下你当前代码的问题：

初始实现的核心问题 #

你的第一个代码里，只给第一个可聚焦按钮绑定了focusout/blur事件，其他绿色按钮完全没有对应的事件监听。这就导致：

• 当你点击第二个、第四个这类其他绿色按钮时，它们的失焦事件不会触发focusOn的更新，focusOn始终停留在初始的第一个按钮
• 所以当你点击红色按钮时，虽然当前聚焦的绿色按钮会失焦，但因为没有绑定事件，focusOn还是第一个按钮，延迟1秒后自然就回到第一个了

折中方案的不足 #

第二个方案尝试监听所有按钮的focus事件，但逻辑上有问题：

• 当点击不可聚焦按钮时，它的focus事件触发后立即调用focusedButton.focus()，这会导致焦点来回跳动（浏览器刚聚焦红色按钮，你立刻强制切回去），而且没有满足你延迟1秒恢复焦点的需求
• 另外，初始的focusedButton获取可能为空（比如页面加载时还没聚焦），会导致报错

正确的解决方案思路 #

我们需要做这几件关键的事：

1. 维护一个全局变量，持续记录最后一次聚焦的可聚焦按钮
2. 给所有可聚焦按钮绑定focus事件，每次它们被聚焦时更新这个变量
3. 监听所有不可聚焦按钮的点击（或者全局的焦点变化），当焦点落到不可聚焦按钮上时，延迟1秒后将焦点恢复到记录的最后一个可聚焦按钮
4. 处理初始状态，确保页面加载时第一个可聚焦按钮被聚焦并记录

完整实现代码 #

HTML

<button data-focusable="true">Button 1</button>
<button data-focusable="true">Button 2</button>
<button data-focusable="false">Button 3</button>
<button data-focusable="true">Button 4</button>
<button data-focusable="false">Button 5</button>
<button data-focusable="false">Button 6</button>
<button data-focusable="true">Button 7</button>

CSS

button:focus { outline: 2px solid green; }
button[data-focusable="true"] { color: green; }
button[data-focusable="false"] { color: red; }

JavaScript

// 获取所有可聚焦和不可聚焦按钮
const focusableButtons = document.querySelectorAll('[data-focusable="true"]');
const nonFocusableButtons = document.querySelectorAll('[data-focusable="false"]');

// 初始化最后聚焦的按钮为第一个可聚焦按钮
let lastFocusedButton = focusableButtons[0];
// 初始聚焦第一个按钮
lastFocusedButton.focus({ preventScroll: true });

// 给所有可聚焦按钮绑定focus事件，更新最后聚焦记录
focusableButtons.forEach(button => {
  button.addEventListener('focus', () => {
    lastFocusedButton = button;
  });
});

// 维护一个定时器变量，避免多个延迟任务冲突
let restoreFocusTimer = null;

// 监听不可聚焦按钮的点击，或者监听全局焦点变化（覆盖键盘tab的情况）
document.addEventListener('focus', (event) => {
  const target = event.target;
  // 如果聚焦到不可聚焦按钮
  if (target.getAttribute('data-focusable') === 'false') {
    // 先清除之前的定时器，避免重复触发
    if (restoreFocusTimer) clearTimeout(restoreFocusTimer);
    // 延迟1秒恢复焦点到最后记录的可聚焦按钮
    restoreFocusTimer = setTimeout(() => {
      lastFocusedButton.focus({ preventScroll: true });
    }, 1000);
  }
}, true); // 使用捕获阶段监听，确保能及时拦截焦点变化

代码解释 #

• 全局焦点监听：用document的focus事件（捕获阶段），能覆盖鼠标点击和键盘tab导航两种情况，确保只要焦点落到不可聚焦按钮上就触发恢复逻辑
• 定时器管理：每次触发恢复逻辑前先清除之前的定时器，避免用户连续点击多个不可聚焦按钮时出现多次焦点跳转
• 可聚焦按钮的记录：每次可聚焦按钮被聚焦时更新lastFocusedButton，保证记录的是最新的有效聚焦目标

这样就能完美实现你的需求：点击红色按钮后，延迟1秒将焦点恢复到最后一次聚焦的绿色按钮上，而不是固定回到第一个。

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