箭头键在Firefox中不起作用

We're creating a slideshow in HTML/CSS/JS but it isn't working in Firefox for some reason. It works in Webkit browsers without a problem..

我们正在HTML / CSS / JS中创建幻灯片，但由于某些原因它在Firefox中不起作用。它在Webkit浏览器中运行没有问题。

The code is this:

代码是这样的：

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

If I use just $( document ) instead of ( document.body ) it does change my colours, but the slides don't change..

如果我只使用$（文档）而不是（document.body）它会改变我的颜色，但幻灯片不会改变..

For some reason, Firefox (7.0.1, OSX Lion) doesn't pick up the keypresses.. It works in Safari/Chrome without a problem.

出于某种原因，Firefox（7.0.1，OSX Lion）没有拿起按键..它在Safari / Chrome中运行没有问题。

The site we're testing this on is : #took link out

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

3 个解决方案

#1

UPDATE: I think your problem lies in the use of the "document.body" selector. This works for me in Chrome but not in Firefox ( http://jsfiddle.net/Jncrh/2/ ) Try just selecting "document" instead and see if it behaves. ( http://jsfiddle.net/Jncrh/5/ )

更新：我认为你的问题在于使用“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 can pick up the keypresses in the above sample, so I suspect the problem lies elsewhere in your code.

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

PREVIOUS: A quick Google search reveals that Firefox uses event.charCode instead of event.keyCode. Try this:

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

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

However, jQuery should be able to pick up all of those with its own event.which, so I don't understand why that isn't working as-is for you.

但是，jQuery应该能够通过自己的event.which来获取所有这些，所以我不明白为什么这不适合你。

#2

In the keydown and keyup events, all major browsers support the keyCode property of the corresponding event, so there's no need for the which property. Also, to catch key events on the whole document, you need to attach the listener to the document rather than the body.

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

Here's the definitive page on JavaScript key events: http://unixpapa.com/js/key.html

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

And here's a revised version of your code:

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

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

#1

$(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");
        }
    }
});