Javascript-当页面中没有元素具有焦点时，将焦点元素设置为keydown

我有一套钮扣。当它们聚焦时，它们会改变颜色。 当用户将鼠标悬停在它们上方或使用向上和向下箭头键时，它们可以获得焦点

当没有按钮具有焦点时（例如，当用户单击其他位置时），按箭头键将焦点移到第一个按钮。至少，这是我们的初衷

然而，由于我有相同的键执行不同的操作，每当我按下向下键时，焦点会转到第一个按钮，并立即转到第二个按钮

我似乎找不到一个办法使这项工作如我所愿。当按下向下箭头键时，当没有按钮有焦点时，我能做些什么来保持焦点在第一个按钮上吗

这就是我正在处理的问题：

var divs=document.getElementsByClassName（“blueBtn”）；
对于（变量i=0；i
.blueBtn{
显示：块；
}
.TN:悬停，
.TN：专注{
背景颜色：蓝色；
}
按钮01
按钮02
按钮03
按钮04
必须有其他更好的方法来做到这一点，但这里是我的建议。我只是使用了一个布尔变量来跟踪焦点何时来自身体


var divs=document.getElementsByClassName（“blueBtn”）；
var fromBody=false；
对于（变量i=0；i
.blueBtn{
显示：块；
}
.TN:悬停，
.TN：专注{
背景颜色：蓝色；
}
按钮01
按钮02
按钮03
按钮04
这是一个有趣的方法，但是，如果焦点在身体上，我按向上箭头键聚焦第一个按钮，那么我需要按向下箭头键两次才能移动到下一个按钮。有没有办法纠正这个问题？我对代码做了一些编辑，这样在上面的场景中，您只需按一次向下箭头键就可以转到下一个按钮。我刚刚将if语句添加到向上箭头键的逻辑中