Question

如果用户点击div（聚焦div），我想抓住特定div的一些事件，键盘事件是捕获的（如果最后一次点击不在div中（不聚焦div）

我尝试了一些事情，但没有成功：JSFiddle

document.getElementById("box").onkeydown = function(event) {
    if (event.keyCode == 13) { // ENTER
        alert("Key ENTER pressed");
    }
}

即使点击div，此代码也不起作用。

纯JS解决方案

Answer 1

默认情况下，div元素不是interactive content。这意味着不存在 return 键将在其上触发的情况。如果您希望div元素具有交互性，可以为其指定contenteditable属性：

<div id="box" contenteditable></div>

要立即触发事件，您需要首先关注div元素（通过单击或跳转到它）。现在，您按下的任何键都将由onkeydown事件处理。

JSFiddle demo

Answer 2

您可以捕获所有点击事件，然后检查事件目标是否在div中：

var focus_on_div = false;

document.onclick = function(event) {
    if(event.target.getAttribute('id') == 'mydiv') {
        focus_on_div = true;
    } else { 
        focus_on_div = false;
    }
}

document.onkeyup = function(event) {
    if (focus_on_div) {
        // do stuff
    }
}

Answer 3

给'div'一个tabindex可以做到这一点，所以div可以有焦点：

<div id="box" tabindex="-1"></div>

如果你点击div它会获得焦点，你可以捕捉到这个事件。

JSFIDDEL

如果您设置'tabindex'＆gt; 0您也可以使用TAB选择div。

Answer 4

试试这段代码我希望这项工作

var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
  mousePosition.x = mouseMoveEvent.pageX;
  mousePosition.y = mouseMoveEvent.pageY;
}, false);

window.onkeydown = function(event) {
    var x = mousePosition.x;
    var y = mousePosition.y;

    var elementMouseIsOver = document.elementFromPoint(x, y);
    if(elementMouseIsOver.id == "box" && event.keyCode == "13") {
        alert("You Hate Enter Dont You?");    
    }
}

DEMO

如何管理特定div上的事件？

4 个答案: