使用JavaScript在鼠标光标移动时获取焦点元素

当我单击任何块时，它会添加一个新的类

。该类被选中。当我通过单击块获得焦点时，效果很好。但是，当我使用箭头键将焦点放在另一个块上时，它不起作用。当我使用箭头键时，如何获得此焦点


让getBlocks=document.querySelectorAll（“.block”）；
getBlocks.forEach（（单个）=>{
single.addEventListener（“焦点”，（）=>{
//删除所有激活的类
getBlocks.forEach（（x）=>{
x、 classList.remove（“被选中”）；
});
//将类添加到此新的焦点块
single.classList.add（“已选择”）；
});
});
*{
框大小：边框框；
}
.根{
最大宽度：600px；
保证金：1rem自动；
}
.root:focus，
.块：焦点{
大纲：0；
}
.被选中{
背景色：#f4f8ff！重要；
边框：1px实心#deebff！重要；
}

1
2
3
您还可以执行以下操作

   document.addEventListener("keypress", (event) => {
       if(event.which === someEventCode) {
         // your code here
       }
    })

这里，
someEventCode
变量对于不同的按键是不同的。
更新：


var ind=0；
让getBlocks=document.querySelectorAll（“.block”）；
函数caretInfo（up=true）{
让sel=window.getSelection（）；
let offset=sel.focusOffset；
如果（向上）{
选择修改（“移动”、“向后”、“字符”）；
if（offset==sel.focusOffset）返回true；
否则{
选择修改（“移动”、“前进”、“字符”）；
返回false；
}
}否则{
选择修改（“移动”、“前进”、“字符”）；
if（offset==sel.focusOffset）返回true；
否则{
选择修改（“移动”、“向后”、“字符”）；
返回false；
}
}
}
功能选择（项目）{
getBlocks.forEach（（x，索引）=>{
如果（x==项目）{
ind=指数；
}
x、 classList.remove（“被选中”）；
});
//将类添加到此新的焦点块
item.classList.add（“已选择”）；
}
getBlocks.forEach（（项）=>{
item.addEventListener（'focus'，（）=>{
选择（项目）；
});
});
文档.添加的事件列表器（“键控”，函数（事件）{
让改变=错误；
if（event.keyCode==38 | | event.keyCode==40）{
如果（event.keyCode==38&&ind>0）{
change=caretInfo（）；
如果（更改）{
ind--；
}
}else if（event.keyCode==40&&ind

*{
框大小：边框框；
}
.根{
最大宽度：600px；
保证金：1rem自动；
}
.root:focus，
.块：焦点{
大纲：0；
}
.被选中{
背景色：#f4f8ff！重要；
边框：1px实心#deebff！重要；
}

1
它是单行的，但现在它是多行的，让人惊讶的是这里会发生什么。问题是，请单击“我”，然后按向上箭头。行动：（但它应该在第一行
lorem ipsumlorem ipsum3
谢谢。但是它有两个错误。1）如果我单击块3，然后使用向上箭头键，它应该将类附加到块2上。但它不是2）如果我在任何块中有多行，那么它就不能正常工作。请参见我编辑的问题problem@Md.Tahazzot我已经更新了代码。我减少了代码，bug也得到了解决。对不起，我刚才说了……）这是一个很酷的答案。但是有一个bug。如果我在一个块上有多行，并且光标在第二行。然后按向上箭头键，它只聚焦上一个块，但它应该跳到第1行。你有这个主意，对吧@Tahazzot博士请检查更新的代码。我希望这会有所帮助。