html - 在 React 的 onFocus 期间区分键盘和鼠标事件

Question

我正在尝试为可访问性制作键盘导航焦点轮廓。伪 :focus-visible 类适用于除输入以外的所有元素，例如文本或文本区域。似乎 input 总是激活这个伪类，因为它需要键盘输入。环顾四周，我找不到修复它的方法，因此它的行为与所有其他可交互元素一样。所以我想我只是在渲染时通过 onFocus 对其进行排序，通过显示/隐藏自定义 css 类，这些类将根据用户如何聚焦输入而出现和消失。我已经做到了同样多，但问题是我现在不知道如何进一步区分输入的来源，键盘或鼠标。这是我到目前为止得到的。第一个 react 钩子(Hook):

  const [keyboardFocus, setKeyboardFocus] = useState(false);
  const toggleKeyboardFocusOn = () => setKeyboardFocus(true);
  const toggleKeyboardFocusOff = () => setKeyboardFocus(false);

所以我们有 keyboardFocus 钩子(Hook)，以及 onFocus 和 onBlur 的开关，它们应该定义天气输入是否应该有键盘焦点。然后我有类选择器来确定键盘轮廓是否处于事件状态:

const inputClassNames = classNames({
    ...
    [css.keyboardOnlyFocus]: keyboardFocus,
  });

最后在渲染输入时我有

      onBlur={toggleKeyboardFocusOff}
      onFocus={toggleKeyboardFocusOn}

至此，关注进出作品，an将展示大纲。我遇到的问题是理解我现在如何在 onFocus 中确定事件是否来自鼠标，在这种情况下应该忽略它，或者它是否来自键盘。

我尝试过的解决方案之一是这样的:

onFocus={(e) => ({
   if(e.key === 'Tab') {
     toggleKeyboardFocusOn;
   }
})

然而什么也没有发生，e.key 的控制台输出显示为未定义。那么告诉 onFocus 事件来自鼠标或键盘的正确方法是什么？

Answer 1

我认为您最好的机会是找出鼠标单击事件和焦点事件发生的顺序，以及它们是否同步(在同一 event loop 期间发生)

这里有一些代码可以帮助您入门:

const eventObserved = useRef(false);
const checkOther = () => {
    if (eventObserved.current) {
        console.log('synchronous!');
    } else {
        eventObserved.current = true;
        setTimeout(() => { eventObserved.current = false });
    }
};

return (
  <input
    onClick={() => {
      console.log('clicked');
      checkOther();
    }}
    onFocus={() => {
      console.log('focus');
      checkOther();
    }}
  />
);

您还可以考虑将 MouseDown 和 MouseUp 与单击分开处理。也许您需要深入到裸机并使用 native 事件而不是 React 合成事件。