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，因为这样可以使事情变得更加轻松。

Answer 2

执行此操作时：

document.onkeydown = focusFeatures;

您正在用onkeydown替换所有其他focusFeatures听众。

document.onkeydown = enable的情况相同。

你应该这样做：

document.addEventListener('keydown', enable, false); // for the games
document.addEventListener('keydown', focusFeatures, false); // for the focus features

加号您应首先声明该函数，然后将其分配给侦听器。

Answer 3

我是否理解每个JS文件都加载到页面上？如果是这样，那么要加载的最后一个文件就是破坏了之前的document.onkeydown处理程序。

每个文档只能有一个document.onkeydown处理程序，因此您必须进行一些聪明的事件调度，以确保它们传播到需要它的每一段代码。常见的库（如jQuery和Google Closure）将为您处理此问题。这是jQuery中的一个例子：

$(document).keydown(function(e) {
    if (e.keyCode == 76) {
        window.console.log("pressed l!");
    }
});

$(document).keydown(function(e) {
    if (e.keyCode == 71) {
        window.console.log("pressed g!");
    }
});

以及与其合作的链接：http://jsfiddle.net/v7v4L/

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

3 个答案: