javascript - 在悬停元素上监听 Keydown 事件

Question

我想在不失去用户当前焦点的情况下检测到控制键命中。

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

为了让它工作，我必须将 tabIndex 添加到我的 div，并且我必须取消注释 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>