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

我看了你的问题和代码，核心问题在于你只给第一个可聚焦按钮绑定了事件，其他可聚焦按钮的焦点变化没有被记录，而且事件绑定的逻辑也有点混乱，导致focusOn变量始终停留在初始的第一个按钮上。下面我来一步步帮你修正这个问题：

问题分析 #

1. 原代码中setFocus只被调用了一次，仅给第一个可聚焦按钮添加了focusout/blur事件，其他绿色按钮获得焦点时，focusOn根本不会更新，所以定时器触发时总是回到第一个按钮。
2. 每次调用setFocus都会重复绑定事件，可能导致多次触发定时器，引发奇怪的焦点跳动。
3. 逻辑上没必要在focusout事件里嵌套判断，应该把「记录最后聚焦的可聚焦按钮」和「处理不可聚焦按钮的焦点恢复」分开。

解决方案 #

我们需要拆分逻辑：

• 单独维护一个变量，专门记录最后一个被聚焦的可聚焦按钮
• 监听所有可聚焦按钮的focus事件，实时更新这个变量
• 监听全局的焦点变化，当焦点落在不可聚焦按钮上时，延迟1秒恢复到最后记录的可聚焦按钮
• 加入定时器清理逻辑，避免重复触发

修正后的完整代码 #

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"]');
let lastFocusedButton = focusableButtons[0];

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

// 监听全局焦点变化，处理不可聚焦按钮的情况
let restoreTimer = null;
document.addEventListener('focus', (event) => {
  const target = event.target;
  // 如果焦点落在不可聚焦按钮上
  if (target.getAttribute('data-focusable') === 'false') {
    // 先清理之前的定时器，避免重复触发
    if (restoreTimer) clearTimeout(restoreTimer);
    // 1秒后恢复焦点到最后聚焦的可聚焦按钮
    restoreTimer = setTimeout(() => {
      lastFocusedButton.focus({ preventScroll: true });
    }, 1000);
  }
});

// 初始聚焦第一个可聚焦按钮
lastFocusedButton.focus({ preventScroll: true });

为什么这样做？ #

1. 分离职责：记录最后聚焦按钮和处理焦点恢复是两个独立的逻辑，分开后更清晰也更容易维护。
2. 全局监听：通过监听document的focus事件，不管用户是点击、Tab切换还是其他方式触发焦点变化，都能捕获到，覆盖所有场景。
3. 定时器清理：避免用户快速点击多个不可聚焦按钮时，多个定时器同时触发导致焦点混乱。
4. 全量绑定：给所有可聚焦按钮绑定focus事件，确保不管哪个可聚焦按钮获得焦点，lastFocusedButton都会被正确更新。

如果你还有其他特殊场景需要适配（比如动态添加按钮），只需要在按钮添加后重新给它绑定focus事件即可。

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