我如何获得多个独立的文档.Onkeydown事件工作

How do i get multiple independant document.onkeydown events to work?

本文关键字：文档 Onkeydown 事件 工作 独立 何获得      更新时间：2023-09-26

我正在我的个人网站工作，我已经建立了一些复活节彩蛋热键。在每个页面上，按下"m"键将隐藏菜单，按下"g"键将在当前页面上方启动游戏。在另一个页面上，我让"t"answers"l"键执行其他CSS更改。在每个页面上，游戏和菜单键都按预期运行，除了带有监听器"t"answers"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"answers"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();
    }
}

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

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

当你这样做的时候:

document.onkeydown = focusFeatures;

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

对于document.onkeydown = enable也是一样。

你应该这样做:

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

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

我在理解每个JS文件加载在页面上是正确的吗?如果是这样，那么要加载的最后一个文件将覆盖前一个文档。onkeydown处理器。

每个文档只能有一个文档。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/

相关文章：