Do something on left/right arrow press

Question

I want to trigger a click event on another element, when a left or right arrow is pressed. Here is the code:

$(window).keypress(function (e) {
  var key = e.which;
  if(key == 13 || key == 39) { // the enter key code or right arrow
    $('.next').click();
    return false;  
  } else if(key == 37) { // left arrow
    $('.prev').click();
    return false;  
  }
});

With Enter key it works like a charm, however on arrow press, nothing happens, like a Magikarp that uses splash! :) What am I missing?

Relevant question: Press left and right arrow to change image?

Answer 1

The arrow keys don't trigger a keypress event, but they do trigger a keyup or keydown event.

Best to use keyup, because keydown can be triggered multiple times while you're holding down a key.

$(window).keyup(function (e) {
  var key = e.which;
  if(key == 13 || key == 39) { // the enter key code or right arrow
    $('.next').click();
    return false;  
  } else if(key == 37) { // left arrow
    $('.prev').click();
    return false;  
  }
});