Shift + mouseover with jQuery

Question

I'm trying to detect whether the shift key is being pressed while the cursor is moved over a particular element. The function fires, but only after I click on another element first. Is there some way to work around this? I've tried setting focus to both the document and element, and tried creating a pseudo-click function but so far nothing has worked.

For example, the following code works only after I click another element on the page:

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

Thanks in advance for any information.

how could the action fire up, if it's set on hover? there is some different problem with the code (beside the posted part), i suspect. — dusoft, Sep 17 '09 at 20:33
@dusoft: I've tested in a completely new document with no other javascript/jQuery (aside from the jQuery source) and a single element on the page with the same results. Thanks for the suggestion though. — Colin Brock, Sep 17 '09 at 20:39
Helpful: How do I check if the mouse is over an element in jQuery?https://stackoverflow.com/q/1273566/1066234 — Avatar, Jun 22 '23 at 14:39

score 10 · Accepted Answer · answered Sep 17 '09 at 20:55

10

check this on the keypress event:

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

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

}

then on the keyup:

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

then do:

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

or the other way around :

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

and

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

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

   }

answered Sep 17 '09 at 20:55

marcgg

65,020
52
178
231

I'm not sure if I understood 100% of what you're trying to do, but I think one of the two should work. – marcgg Sep 17 '09 at 21:00
@marcgg: Thanks for the response. It turned out that I needed to adjust what I was doing a little, but this answered my initial question. – Colin Brock Sep 21 '09 at 14:31
1

Too complex. KISS (Keep it short and simple). Check out Martin Schaer's Answer! :-) – JMW Jun 19 '13 at 14:07

score 8 · Answer 2 · edited Sep 30 '15 at 07:13

8

It is not necessary to store in a variable when the shift key is pressed and released. You can achieve what you are trying to to like this:

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

edited Sep 30 '15 at 07:13

fracz

20,536
18
103
149

answered Jul 08 '11 at 22:25

Martin Schaer

3,986
1
23
28

1

This should be the right answer :-) please replace .click() with .mouseover() – JMW Jun 19 '13 at 14:06

score 1 · Answer 3 · answered Sep 17 '09 at 20:51

I tried your code like this and it works perfectly. You do have to "shift" then mouseover, though.

<!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>

What type of element is it being applied to?

@Mark: It was being applied to an img, however I needed to adjust what I was doing. Thanks for your response though - it helped. — Colin Brock, Sep 21 '09 at 14:32

score 0 · Answer 4 · answered Sep 26 '19 at 15:49

Working sample,

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)
       }

Shift + mouseover with jQuery

4 Answers4

Linked