Question

我正在尝试检测光标移动到特定元素上时是否按下了shift键。该函数触发，但在之后我先点击另一个元素。有办法解决这个问题吗？我已经尝试将焦点设置到文档和元素，并尝试创建一个伪点击功能，但到目前为止没有任何工作。

例如，以下代码仅在我单击页面上的其他元素后才起作用：

$("#selector").mouseover(function(e){
    if(e.shiftKey) {
        console.log("the shift key is pressed");
    }
});

提前感谢任何信息。

Answer 1

在按键事件上检查：

$(document).keypress(function (e) {

  if(e.shiftKey) {
    pressed = true; // pressed is a global varialbe. Be carefull of the scope
  }

}

然后在关键字上：

$(document).keyup(function(event){
   pressed = false;
});

然后做：

$("#selector").mouseover(function(e){
    if(pressed) {
        console.log("the shift key is pressed");
    }
});

或者相反：

$("#selector").mouseover(function(e){
    isover = true;
});

和

   $(document).keypress(function (e) {

      if(e.shiftKey) {
        alert("do something")
      }

   }

Answer 2

按下和释放换档键时，无需存储在变量中。你可以实现你想要的目标：

$('#selector').mouseover(
    function(e){
        if (e.shiftKey)
        {
            console.log("the shift key is pressed");
        }
    }
);

Answer 3

我尝试了这样的代码，它完美无缺。但是你必须“移动”然后鼠标悬停。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
    loadHandler = function(){
        $("#selector").mouseover(function(e){
            if(e.shiftKey) {
                alert("the shift key is pressed");
            }
        });
    }
</script>
</head>
<body onload="loadHandler();">
<div style="border:1px solid black" id="selector">

    <br/>
    <br/>

    This is a div.

    <br/>
    <br/>

<div>
</body>
</html>

它应用于什么类型的元素？

Answer 4

工作示例

MouseEvent.shiftKey，MouseEvent.ctrlKey

MouseEvent.ctrlKey

MouseEvent.shiftKey

   <img onmouseover="keypress_test(event)" onmouseout="keypress_test(event)">


    function keypress_test(event) {

             // false, no press, 
             // true, pressed

              console.log(event.ctrlKey)

              console.log(event.shiftKey)
       }

使用jQuery切换+鼠标悬停

4 个答案: