Question

我知道如何检测document上的关键事件。我也知道如何检测DOM元素中的mousemove事件。

但我不知道如何在鼠标悬停在元素上并且鼠标不移动时发生关键事件。

我想我可以在DOM元素上设置一个布尔值，它将mousemove设置为真，并由mouseout设置为false。但有没有更合适的方法呢？

我发现了一个直接相关但没有答案的问题（这些评论确实没有帮助）：

Detect shift key while already over element

Answer 1

以上是对我评论的扩展。

使用vanilla JavaScript，您可以在onmouseover和onmouseleave的元素上设置事件侦听器。这些事件监听器切换一个布尔变量，这只是一个标志，表示鼠标当前是否在元素上。

然后在窗口上添加另一个事件监听器以进行按键操作。按键，如果我们的布尔值为true，则运行你的代码，如果不是，则不执行任何操作。

var mouseOn = false;

document.getElementById('div').onmouseover = function() {
    console.log('mouseover');
    mouseOn = true;
}

document.getElementById('div').onmouseleave = function() {
    console.log('mouseleave');
    mouseOn = false;
}

window.onkeypress = function(e) {
    if(mouseOn == true) {
    console.log(e.key)
  }
}

这里是小提琴：https://jsfiddle.net/6wpeLbx9/（注意：小提琴中的窗口对象只是包含红色方块的面板 - 为了注意按键，首先必须点击面板专注于它）

我确信我的代码可以更简洁......

希望有所帮助！

鼠标悬停在DOM元素上时检测键事件

1 个答案: