Keydown and Mouse down together, different actions

Question

Im trying to change the cursor on differnet actions. Essentially like panning a map. Default: Standard pointer cursor Shift Press: Grab Cursor Shift + Left Click(hold/dragging): Grabbing Cursor

However, this works great until i start to move, which then my cursor jumps back to Grab instead of staying on grabbing. What am I doing wrong?

$(document).keydown(function(event){
  //spacebar = 8
    if (event.keyCode == 16) {

        $('#mysvg').css('cursor', '-webkit-grab');

        }
});
$(document).keyup(function(event){
  //spacebar = 8
    if (event.keyCode == 16) {

        $('#mysvg').css('cursor', 'pointer');
    } 
});



$( "#mysvg" ).mousedown(function(event){
      if (event.shiftKey) {
          $('#mysvg').css('cursor', '-webkit-grabbing');
      }
});

Answer 1

Keydown fires repeatedly in many browsers until you lift the key. I know Chrome and Firefox have this behavior. So your keydown handler is resetting the cursor.