如何让多个独立的 document.onkeydown 事件起作用？

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，因为这会让事情变得更加容易。