Question

我们正在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

Answer 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来获取所有这些，所以我不明白为什么这对你不起作用。< / p>

Answer 2

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

Answer 3

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

箭头键在Firefox中不起作用

3 个答案: