javascript - 我如何让多个独立的 document.keydown 事件起作用？

Question

我正在我的个人网站上工作，我已经构建了一些复活节彩蛋热键。在每个页面上按“m”键应隐藏菜单，按“g”键应在当前页面顶部启动游戏。在另一页上，我使用“t”和“l”键执行其他 CSS 更改。在每个页面上，游戏和菜单键都按预期运行，但带有“t”和“l”监听器的页面除外。显然存在某种冲突，使他们无法在每个页面上工作。我相信这是因为我在三个不同的文件中声明了监听器。我想保持这种方式，以便我的网站更加模块化(即我可以轻松地将游戏的 js 文件传输到任何其他网站)。有什么想法吗？

第一个监听器，'m'键: (nav-script.js)

document.addEventListener('keydown', function(evt){
   var evt = evt || window.event;
   if(evt.keyCode == 77){
      showNav();
   }
},false);

第二个监听器，“g”键:(clickgame.js)

document.onkeydown = enable;

function enable(event){
    // Enables/disables the game

    var event = event || window.event;
    if(event.keyCode == 71 && !enabled){ // 71 is the code for the 'G' key
        game = true;
        enabled = true;
        setup();
    }else if(event.keyCode == 71){
        game = false;
        enabled = false;
        quitgame();
    }
}

第三个监听器，“l”和“t”键: (project-focus.js)

document.onkeydown = focusFeatures;

function focusFeatures(event){
    var event = event || window.event;
    if(event.keyCode == 76){
        lightswitch();
    }else if(event.keyCode == 84){
        textswitch();
    }
}

Answer 1

document.onkeydown = 赋值会覆盖所有先前分配的处理程序。您需要使用 addListener 有效地为同一事件附加多个处理程序。

或者，您可以只使用 jQuery，因为这会使事情变得容易得多。