侦听悬停元素上的 Keydown 事件答案

【问题标题】：Listen For Keydown Event On Hovered Element侦听悬停元素上的 Keydown 事件
【发布时间】：2019-01-29 23:04:30
【问题描述】：

我想在不丢失用户当前焦点的情况下检测控制键的点击。

例如（见下文）用户正在向文本区域写入内容，文本区域是当前元素的焦点。然后我的最终用户将鼠标移动到一个 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>

【问题讨论】：

你问的不是一样的吗？ stackoverflow.com/questions/18108205/…
当用户按下定义的键时，为什么不检查鼠标是否在 div 内？当鼠标进入 div 时更新一个变量（也当鼠标 laves 时），所以当用户按下键时，检查那个 var 并做你需要的事情

标签： javascript html

【解决方案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>

【讨论】：