Como posso evitar a rolagem com teclas de seta, mas não o mouse?

Question

Desde que eu estou usando jQuery, qualquer solução via que iria trabalhar muito. Idealmente, eu gostaria de saber ambos, apesar de tudo.

Já tenho as setas ligadas para outra função na minha página (usando jQuery), mas tê-los causa da página para rolar para além disso, me causa problemas.

Talvez eu tenha conhecido isso de uma só vez, mas eu não me lembro mais.

Answer 1

Adicionando manipulador de nível keypress documento faz o truque!

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});

Answer 2

Em algumas circunstâncias, por exemplo. quando você não actualy têm um elemento que você focar, apenas algumas área que você tinha que clicar, você pode não ter muito controle sobre o manipulador e prevenir o evento a nível global pode ser um pouco esquisito no melhor dos casos (como eu encontrei da maneira mais difícil).

A solução mais simples nesses casos é ligar no clique, mesmo do botão de controle e foco em um elemento de entrada vazia que você posição -9000px para a esquerda.

Você pode então bloquear de forma confiável o evento via keydown e também não precisa se preocupar sobre o bloqueio de comportamento padrão ou outros ouvintes globais desde o comportamento padrão no elemento de entrada será apenas mover o cursor para a esquerda e direita.

Answer 3

Se você adicionar um manipulador de nível keypress documento que irá impedir rolagem normal, na página a qualquer momento, não só quando o seu elemento tem o foco, isso pode ser um efeito indesejado.