2

在不使用 jQuery 或类似库的情况下悬停某个元素 ( div)时是否可以检查是否按下了键盘上的键？

4

5 回答 5

4

这是一个纯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当它悬停时输入。

于 2012-11-28T10:01:09.610 回答
4

这是一个简单的 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和-- 但概念保持不变。onkeyuponmousemover

于 2012-11-28T10:02:03.050 回答
0

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

您必须在 div 上的悬停 (onmouseover) 上添加一个 javascript 事件，该事件在同一 div 上设置 keydown 事件。

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

于 2012-11-28T09:55:22.250 回答
0

简短回答者

是的，有可能

但是，如果可能的话怎么办？

好吧，使用 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');
  ...
});

查看此键列表以了解与字符关联的 javascript 键码

编辑：我刚刚阅读了您关于不使用 jQuery 的评论，该评论应包含在问题中

于 2012-11-28T10:18:47.570 回答
-1

您可以为此目的使用 jquery

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

或者

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

}

});
于 2012-11-28T09:56:36.120 回答