CODEWITHSUNDEEP
javascriptjquerynavigationmousemove
Ian
Ian

Reputation: 1910

Detect when mouse actually moves, not just when the page moves

I'm having a pretty big problem trying to create navigation on my page. If the mouse enters an element then it selects it, then if you use arrow keys it will select the elements relative to the selected one. However this is an issue when the arrow keys cause the page to scroll, because (depending on the position of the mouse) it will select the appropriate element then instantly select the item the mouse is now over after the page moved (even if you didn't move the mouse).

Does anyone know how to fix this problem? I tried tinkering with it but none of my solutions seemed to work. Any help is appreciated, thank you.

Upvotes: 1

Views: 315

Answers (3)

Explosion Pills
Explosion Pills

Reputation: 191749

It sounds like you should bind the "select when mouse enters" event on mousemove and unbind said event on mousestop. mousestop does not exist on its own, so you will have to create it somehow or use a plugin (there are at least a few out there such as https://github.com/richardscarrott/jquery-mousestop-event/ ). I think this would be the simplest solution, but your UI seems a little bizarre (you want the arrow key to scroll the page normally and "select" an element that's possibly larger than the scroll size?)

Upvotes: 1

James Johnson
James Johnson

Reputation: 46047

Not sure I completely understand, but you should be able to use a combination of the mousemove and keypress events:

$("#element").mousemove(function(e){
    alert("mouse moved");
});

$("#element").keypress(function(e){
    if (e.keyCode == 38 || e.keyCode == 40){ //up & down arrow keys
        e.preventDefault();
    }
});

Upvotes: 1

Andres Riofrio
Andres Riofrio

Reputation: 10357

Try returning false from the keyboard event handler where you check for arrow keys:

element.onkeypress = function(ev) {
    // ...
    return false;
}

This will prevent the "default behavior" that the browser has for the event, which is to scroll. This works also for links, for example: if you return false from a click event handler for a link, clicking the link will not automatically follow it.

Upvotes: 0

Related Questions