Question

当使用jQuery或类似的库悬停某个元素（div）而没有时，是否可以检查键盘上的键是否被按下了？

Answer 1

这是一个简单的JavaScript解决方案：

var yourDiv = document.getElementById("yourdiv"); //cache your div
var keyPressed = 0; //kinda-boolean flag, if it's not 0 then at least one key is pressed
document.onkeydown = function() { //when a key is "down"
    keyPressed ++; //increment the counter of "down" keys
};
document.onkeyup = function() { //when a key is "released"
    keyPressed --; //decrement the counter of "down" keys
    keyPressed = Math.max(0, keyPressed); //make sure it doesn't go negative
};
yourDiv.onmouseover = function() { //when you hover your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

上述内容仅在鼠标进入 div时触发鼠标事件。如果您希望它在其内部移动时触发，请改为使用onmousemove事件：

yourDiv.onmousemove = function() { //when the mouse moves inside your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

请注意，您可以使用addEventListener而不是直接设置onkeydown，onkeyup和onmousemover - 但概念保持不变。

Answer 2

这是一个纯粹的JS实现：

myElement = document.getElementById('mydiv');

function keyaction(e){
    myElement.innerHTML+= String.fromCharCode(e.charCode);
}

myElement.addEventListener("mouseover",function() {
    document.addEventListener("keypress", keyaction);
});

myElement.addEventListener("mouseout",function() {
    document.removeEventListener("keypress", keyaction, false);
});

以下是演示：http://jsfiddle.net/bAV6f/1/

悬停时输入div。

Answer 3

尝试Shift + mouseover with jQuery转换应该可以改变你想要的任何键我相信。并且您想尝试在接受的答案中提出的第二个选项。

Answer 4

你的答案是肯定的，这是可能的。

你必须在hover（onmouseover）上添加一个javascript事件，在div上设置同一div上的keydown事件。

当用户再次停止悬停时（onmouseout），您将不得不删除keydown事件。

Answer 5

短的anwser

是，是可能的

但是，如果有可能怎么办呢？

好吧，使用Jquery非常简单：

$("div#selector").mouseover(function(e) {
  if (e.ctrlKey)
    alert('You are hover selector and pressing ctrl');
  if (e.altKey)
    alert('You are hover selector and pressing alt');
  if (evt.which == 77)
    alert('You are hover selector and pressing m');
  ...
});

请参阅此list of key以了解与角色相关联的javascript键码

编辑：我刚刚发表了关于不使用应该包含在问题中的jQuery的评论

Answer 6

您可以将jquery用于此目的

$("p").hover(function(){
//Your code
});

或者

$(".selector").on({
mouseenter: function () {
//stuff to do on mouseover
}, 
mouseleave: function () {
//stuff to do on mouseleave

}

});

将鼠标悬停在div上时，检查是否按下了键

6 个答案:

短的anwser

但是，如果有可能怎么办呢？