web-dev-qa-db-fra.com

jQuery touchez la navigation gauche / droite

Je veux donner à mon curseur de contenu la possibilité de répondre à la fonction de pression de touche (touche de direction GAUCHE et touche de direction DROITE). J'ai lu certains conflits entre plusieurs navigateurs et systèmes d'exploitation.

L'utilisateur peut naviguer sur le contenu pendant qu'il se trouve sur le site Web mondial (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

J'ai besoin d'une solution sans conflits de crossover (navigateurs, OS).

javascriptjquerykeyboardkeypressonkeypress
39
Tomkay
$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $("#showroom").animate({
      left: "-=980"
    });
  }
  else if(e.keyCode == 39) { // right
    $("#showroom").animate({
      left: "+=980"
    });
  }
});
91
Flo Edelmann
$("body").keydown(function(e){
    // left arrow
    if ((e.keyCode || e.which) == 37)
    {   
        // do something
    }
    // right arrow
    if ((e.keyCode || e.which) == 39)
    {
        // do something
    }   
});
15
Jiří Melčák

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();
    }
});
6
Erwan

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
    }
});
1
Jacob Smith

L'utilisation de l'expression de fonctions nommées peut aider à conserver un code plus 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];

});
1
Tom Ah