为什么按下 Tab 时 onKeyDown 会在 onBlur 之后触发？

Question

我有一个奇怪的问题。我想让页面易于访问，键盘友好。我想通过 Tab 按钮在项目之间切换，然后按空格键或 Enter 键。但是，当我为 Material UI 按钮添加 onKeyDown 事件时，按下按钮时回调不会运行，而是在切换到另一个元素之后运行。对我来说，它看起来像一个错误。

https://codesandbox.io/s/thirsty-tdd-xyjt8y

 <Stack spacing={2} direction="row">
  <Button variant="text" onKeyDown={() => { console.log("fooo") }}>Text</Button> 
  <Button variant="contained">Contained</Button> // foo is displayed when focus jumps to this element
  <Button variant="outlined">Outlined</Button>
</Stack>

Answer 1

按下按钮时回调不会运行，但切换到另一个元素后

我在你的例子中没有看到这种行为。我什至在您的示例中添加了 onBlur() 和 onFocus() 处理程序。

<Button variant="text" onKeyDown={() => { console.log("keydown") }} onFocus={() => { console.log("focus") }} onBlur={() => { console.log("blur") }}>Text</Button>

当我tab到“文本”按钮时，我在控制台中看到“焦点”。

当我taboff“文本”按钮时，我在控制台中看到“keydown”，然后是“blur”。

“keydown”事件被触发，因为我按下了键盘键（tab键）。 “模糊”事件被触发是因为“文本”按钮失去焦点（因为我按下了tab）。