侦听悬停元素上的Keydown事件

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悬停在div上，则阻止默认操作（这样就不会在textarea中打印任何文本）。

 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>