jQuery按键左/右导航

我想给我的内容滑块响应按键（左箭头键和右箭头键）function的能力。 我已经阅读了几个浏览器和操作系统之间的一些冲突。

用户可以在全球网站（正文）上浏览内容。

伪代码：

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 

我需要一个没有任何交叉（浏览器，操作系统）冲突的解决scheme。

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

这对我来说很好：

 $(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

我更喜欢使用这个模板：

 $(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

命名函数expression式的使用可能有助于保持更干净的代码：

 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]; });