偵聽懸停元素上的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>