侦听悬停元素上的键控事件

Question

我想检测控制键命中，而不会丢失用户当前的焦点。

例如(见下文(用户正在将某些内容写入文本区域，文本区域是当前元素的重点。 然后我的最终用户将鼠标移动到div 上(只是悬停，而不是单击(，如果他按下控制键，我想执行一个函数(下面的keyDown(。

为了使它正常工作，我不得不在我的div中添加一个tabIndex，并且我不得不取消注释theDiv.focus()行，这让我很难过，因为它会导致我失去对活动文本区域的注意力。

当某人的鼠标位于特定元素上时，如何同时检测某人是否按下了某个键，而不会丢失当前元素的焦点？

var theDiv = document.getElementById("theDiv");
function entered(e) {
theDiv.addEventListener("keydown", keyDown);
//theDiv.focus();
}
function keyDown(e) {
alert(e.key)
}
theDiv.addEventListener("mouseover", entered);

#theDiv {
width: 100px;
height: 100px;
border: 1px silver solid;
}
#theDiv:hover {
border: 1px silver dashed;
}

<div id="theDiv" tabindex="-1">
</div>
<div>
<textarea id="a">Click here, then hover the div above and hold "Shift" key</textarea>
</div>

Answer 1

可以将mouseover事件侦听器添加到文档中，以将悬停在全局变量上的元素存储在全局变量中。当文档上有keydown事件时，如果将鼠标悬停在div上，请阻止默认操作(因此不会将任何文本打印到文本区域中(。

var theDiv = document.getElementById("theDiv");
var hoverTarget = document.body;
var res = document.getElementById("result");
document.addEventListener("mouseover", function(e){
hoverTarget = e.target;
});
function keyDown(e) {
res.innerText = "Key: "+e.key+" KeyCode: "+e.keyCode;
}
document.addEventListener("keydown", function(e){
if(hoverTarget===theDiv){
e.preventDefault();
keyDown(e);
}
});

#theDiv {
width: 100px;
height: 100px;
border: 1px silver solid;
}
#theDiv:hover {
border: 1px silver dashed;
}

<div id="theDiv" tabindex="-1">
</div>
<div>
<textarea id="a">Click here, then hover the div above and hold "Shift" key</textarea>
</div>
<span id="result">
</span>