Question

我的HTML网页有一个JS文件。我想检查四件事。如果他们在小键盘上打了一个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分配另一个事件处理功能时，您正在做

key = 2;

问自己一个问题：变量key是否容纳1？否。以上声明已将其覆盖。 key现在持有2。 1是“丢失的”。这就是为什么仅执行最后一个事件处理程序（用于小键盘4）的原因。最后一个作业已覆盖之前的作业。

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

将事件操作归为一个功能
使用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。您仍然可以使用，但不建议这样做。浏览器开发人员有可能决定将来放弃此功能。这导致代码无法正常工作。问题在于每个浏览器/操作系统都有自己的keyCode，这使其可靠性降低。

要采用一种清洁的方法，请考虑使用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";
    }
}

一个JS文件中有多个keyup事件

7 个答案: