jQuery keypress gauche/droite de navigation

Question

Je souhaite donner à mon curseur de contenu la possibilité de répondre aux touches (FLÈCHE GAUCHE et Touche FLÈCHE DROITE). J'ai lu à propos de certains conflits entre plusieurs navigateurs et systèmes d'exploitation.

L'utilisateur peut naviguer dans le contenu lorsqu'il se trouve sur le site Web global (corps).

Pseudo Code:

ON Global Document 

IF Key Press LEFT ARROW 

THEN animate #showroom css 'left' -980px 


IF Key Press RIGHT ARROW 

THEN animate #showroom css 'left' +980px 

je besoin d'une solution sans croisement (Browsers, systèmes d'exploitation) des conflits.

Answer 1

$("body").keydown(function(e) { 
    if(e.keyCode == 37) { // left 
    $("#showroom").animate({ 
     left: "-=980" 
    }); 
    } 
    else if(e.keyCode == 39) { // right 
    $("#showroom").animate({ 
     left: "+=980" 
    }); 
    } 
}); 

Answer 2

$("body").keydown(function(e){ 
    // left arrow 
    if ((e.keyCode || e.which) == 37) 
    { 
     // do something 
    } 
    // right arrow 
    if ((e.keyCode || e.which) == 39) 
    { 
     // do something 
    } 
}); 

Answer 3

Cela fonctionne bien pour moi:

$(document).keypress(function (e){ 
    if(e.keyCode == 37) // left arrow 
    { 
     // your action here, for example 
     $('#buttonPrevious').click(); 
    } 
    else if(e.keyCode == 39) // right arrow 
    { 
     // your action here, for example 
     $('#buttonNext').click(); 
    } 
}); 

Answer 4

Je préfère utiliser ce modèle:

$(document).keypress(function(e){ 
    switch((e.keyCode ? e.keyCode : e.which)){ 
     //case 13: // Enter 
     //case 27: // Esc 
     //case 32: // Space 
     case 37: // Left Arrow 
      $("#showroom").animate({left: "+=980"}); 
     break; 
     //case 38: // Up Arrow 
     case 39: // Right Arrow 
      $("#showroom").animate({left: "-=980"}); 
     break; 
     //case 40: // Down Arrow 
    } 
}); 

Answer 5

L'utilisation de l'expression des fonctions nommées peut aider à garder un code propre:

function go_left(){console.log('left');} 
function go_up(){console.log('up');} 
function go_right(){console.log('right');} 
function go_down(){console.log('down');} 


$(document).on('keydown',function(e){ 

    var act={37:go_left, 38:go_up, 39:go_right, 40:go_down}; 
    if(act[e.which]) var a=new act[e.which]; 

});