箭头键在 Firefox 中不起作用答案

【问题标题】：Arrow keys not working in Firefox箭头键在 Firefox 中不起作用
【发布时间】：2011-10-05 13:27:07
【问题描述】：

我们正在使用 HTML/CSS/JS 创建幻灯片，但由于某种原因无法在 Firefox 中运行。它在 Webkit 浏览器中运行没有问题..

代码是这样的：

    keyPress : function() {
      $( document.body ).keydown(function(e) {
         if ( e.keyCode === 37 || e.keyCode === 39 || e.which == 37 || e.which === 39) {
            e.preventDefault();
            ( e.keyCode === 39 || e.which === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   },

如果我只使用$( document ) 而不是( document.body )，它确实会改变我的颜色，但幻灯片不会改变..

由于某种原因，Firefox（7.0.1，OSX Lion）无法识别按键。它可以在 Safari/Chrome 中正常运行。

我们正在测试的网站是：#took link out

【问题讨论】：

我是否可以恭敬地建议您提供一种方法来单击幻灯片，以及通过它们的箭头键？
是的，它在待办事项列表上；但我希望它在 Firefox 中工作 :(
使用 Firebug 检查e 对象以找出它支持的方法和属性。

标签： javascript jquery firefox keypress

【解决方案1】：

更新：我认为您的问题在于使用“document.body”选择器。这对我在 Chrome 中有效，但在 Firefox 中无效（http://jsfiddle.net/Jncrh/2/）尝试只选择“文档”，看看它是否正常。 (http://jsfiddle.net/Jncrh/5/)

$(document).bind('keydown',function(e){
    if (e.which==37 || e.which==39) {
        e.preventDefault();
        if (e.which==37) {
            alert("going back");
        } else {
            alert("going forward");
        }
    }
});

Firefox 可以获取上述示例中的按键，所以我怀疑问题出在代码的其他地方。

上一篇：快速的 Google 搜索显示 Firefox 使用 event.charCode 而不是 event.keyCode。试试这个：

key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (key===37 || key===39) {...

但是，jQuery 应该能够使用自己的event.which 获取所有这些，所以我不明白为什么这对你不起作用。

【讨论】：

不过似乎对我不起作用.. :\ if ( e.keyCode === 37 || e.keyCode === 39 || e.charCode === 37 || e.charCode === 39) {
老实说，我不明白为什么它不起作用.. 就像你说的那样，我认为“哪个”会捡起它，但是唉。它在 Firefox 中适合您吗？
如果我将其更改为（文档），它会更改我的颜色，但不会更改我的幻灯片。由于某种原因，它们不会设置动画。我会尝试从 $(document) 开始工作，看看是否可以解决这样的问题。

【解决方案2】：

在keydown和keyup事件中，各大浏览器都支持对应事件的keyCode属性，所以不需要which属性。此外，要捕获整个文档的关键事件，您需要将侦听器附加到文档而不是正文。

这里是 JavaScript 关键事件的权威页面：http://unixpapa.com/js/key.html

这是您的代码的修订版本：

$(document).keydown(function(e) {
    var leftArrow = (e.keyCode == 37), rightArrow = (e.keyCode == 39);
    if (leftArrow || rightArrow) {
        e.preventDefault();
        rightArrow ? Slides.next() : Slides.prev();
    }
});

【讨论】：

【解决方案3】：

    if ($.browser.mozilla) {     
        $(document).keypress (keyType); 
    } 
    else{
       $(document).keydown (keyType);
    }

    function keyType(e){
    if (e.keyCode==37 || e.keyCode==39) { 
        e.preventDefault();         
        if (e.which==37) {             
           //handle left
        } 
        else { 
          //handle right      
        }       
    } 
}

【讨论】：