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>

DateTimeDigitized

侦听悬停元素上的Keydown事件

1 个答案: