一个JS FILE中的多个keyup事件

Question

我的HTML网页有一个JS文件。 我想要检查4件事。 如果他们按键盘上的数字1-4，则将它们带到指定的URL。 该脚本有效，但只有我有一个。

当我将所有4个事件放在js文件中时，只有最后一个/最近的事件有效。 是否存在某种语法，我正在做错，这会阻止它们中的所有4个工作？

为了进一步说明，使用此代码，只运行脚本的这一部分：

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS：

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 1

如果你将所有条件都放在同一个函数中，它将会很有效。 否则，您每次都会覆盖您的功能。 这就是为什么你遇到的问题，唯一的工作是最后一个。 最后，尝试使用if ，然后使用else if 。 否则，您将无缘无故地每次验证每个条件。

 //If they hit keypad number 1 document.body.onkeyup = function(e){ if(e.keyCode == 49){ window.location.href = "http://localhost:1337/trail"; } else if(e.keyCode == 50){ window.location.href = "foo"; } else if(e.keyCode == 51){ window.location.href = "http://localhost:1337/topten"; } else if(e.keyCode == 52){ window.location.href = "foo"; } } 

Answer 2

这种行为可以用这种方式解释：你要做的是为onkeyup事件分配一个函数。 这与使用变量时的方式相同。 让我们说吧

var key = 1; 

是一个“简化”的代码

document.body.onkeyup = function(e){
  // action for keypad 1
}

然后，当你为onkeyup分配另一个事件处理函数onkeyup ，你正在做

key = 2;

问自己一个问题：变量key保持1 ？ 不，这被上述声明所覆盖。 key现在持有2 。 1是“迷失”。 这就是为什么只执行最后一个事件处理程序（用于键盘4）的原因。 最后一项任务已覆盖先前的任务。

要解决此问题，您有两种选择：

1. 将事件操作分组到一个函数中
2. 使用EventTarget.addEventListener

使用选项1 ，您可以将操作分组到一个函数中，如下面的交互式示例所示：

 // input acts as your document.body const inp = document.getElementById('foo'); inp.onkeyup = function(e) { if(e.keyCode == 49) { console.log('pressed keyCode 49'); // press 1 } else if(e.keyCode == 50) { console.log('pressed keyCode 50'); // press 2 } else if(e.keyCode == 51) { console.log('pressed keyCode 51'); // press 3 } else if(e.keyCode == 52) { console.log('pressed keyCode 52'); // press 4 } }; 

 <input id="foo" type="text" placeholder="type something"> 

但有时候这并不灵活。 也许你想对keyup事件有两个不同的动作。 当然你可以在一个函数中对它进行分组，但是如果另一个js文件覆盖了该函数呢？ 还是js文件中的另一个片段？ 那没有效果。

为了防止这种情况，您可以使用选项2 ： .addEventListener这是一种更强大的方法。 以下是一个交互式示例：

 // input acts as your document.body const inp = document.getElementById('foo'); inp.addEventListener('keyup', function(e) { if(e.keyCode == 49) { console.log('first function: keyCode 49'); // press 1 } }); inp.addEventListener('keyup', function(e) { if(e.keyCode == 50) { console.log('second function: keyCode 50'); // press 2 } }); 

 <input id="foo" type="text" placeholder="type something"> 

另外，我想添加另一个建议：你使用的是不推荐使用的.keyCode 。 你仍然可以使用，但不鼓励它。 浏览器开发人员可能决定在将来放弃此操作。 这会导致代码无效。 问题是每个浏览器/操作系统都有自己的keyCodes，这使得它不太可靠。

要获得干净的方法，请考虑使用KeyboardEvent.code

Answer 3

您好，欢迎来到StackOverflow;）

您每次都注册一个新的onkeyup事件监听器。 尝试将if语句全部放入一个侦听器中，如下所示：

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
     if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

我希望这有帮助。

Answer 4

然而，大多数人的答案都可以简单地避免代码重复和“IF”语句的长篇大论，我只会使用switch语句：

document.body.onkeyup = function(e){
    switch(e.keyCode) {
        case 49:
            window.location.href = "http://localhost:1337/trail";
            break;
        case 50:
            window.location.href = "foo";
            break;
        case 51:
            window.location.href = "http://localhost:1337/topten";
            break;
        case 52:
            window.location.href = "foo";
            break;
    }
}

Answer 5

你重写了事件处理程序，你需要在那里有一个函数。 试试这个选项：

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    } else if(e.keyCode == 50){
        window.location.href = "foo";
    } else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    } else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

或者您可以使用开关代替。

Answer 6

是的，有一种替代语法允许将多个事件处理程序添加到同一个对象而不会相互覆盖。

addEventListener('keyup', functionHere );

 /* // This will work without overriding other functions... //If they hit keypad number 1 document.body.addEventListener("keyup", function(e){ if(e.keyCode == 49){ window.location.href = "http://localhost:1337/trail"; } }); //If they hit keypad number 2 document.body.addEventListener("keyup", function(e){ if(e.keyCode == 50){ window.location.href = "foo"; } }); //If they hit keypad number 3 document.body.addEventListener("keyup", function(e){ if(e.keyCode == 51){ window.location.href = "http://localhost:1337/topten"; } }); //If they hit keypad number 4 document.body.addEventListener("keyup", function(e){ if(e.keyCode == 52){ window.location.href = "foo"; } }); */ // It may be best to combine them all even when using this method... document.body.addEventListener("keyup", function(e) { //If they hit keypad number 1 if (e.keyCode == 49) { window.location.href = "http://localhost:1337/trail"; } //If they hit keypad number 2 if (e.keyCode == 50) { window.location.href = "foo"; } //If they hit keypad number 3 if (e.keyCode == 51) { window.location.href = "http://localhost:1337/topten"; } //If they hit keypad number 4 if (e.keyCode == 52) { window.location.href = "foo"; } }); 

Answer 7

也许在一个事件监听器中添加所有的if ：

document.body.addEventLister("keydown", function(e) {
    if (e.key == "Digit1") {
        window.location.href = "http://localhost:1337/trail";
    }
    if (e.key == "Digit2") {
        window.location.href = "foo";
    }
     if (e.key == "Digit3") {
        window.location.href = "http://localhost:1337/topten";
    }
    if (e.keyCode == "Digit4") {
        window.location.href = "foo";
    }
}