Question

我有一个颜色猜谜游戏，在页面顶部有六个不同的颜色方块和一个rgb代码。游戏正常运行，游戏通过功能重置 - resetUI（） - 当点击页面上的重置按钮时。

但是，我想在按下空格键时触发resetUI功能。我有以下代码，它不会抛出任何错误但它也不起作用：

var body = document.querySelector("body");
body.addEventListener("keydown",function(){
  if(this.key === " "){
    resetUI();
  }
});

我相当肯定我对“这个”的使用是错误的，但我想不出另一种选择。

我搜索过MDN和stackOverflow，但我还没有看到解决这个问题的方法。感谢。

Answer 1

你有很多不必要的代码。您应该从回调函数接收event对象，以检查按下哪个键。

要检查空格键，您不应检查" "，而是必须检查事件的keyCode。

document.body.onkeydown = function(e){
        if(e.keyCode == 32){
             console.log("space bar pressed");
             resetUI();
        }
    }

Answer 2

key属于事件（传递给事件处理程序），而不是正文（this引用的那个）。

您将遇到的下一个问题是当您向页面添加输入或文本区域时，只要用户在输入中放置空格，它就会运行您的功能。您可以检查目标以确保输入不是在你开火之前接受击键..

var body = document.querySelector("body");
body.addEventListener("keydown",function(e){
  var isInput = ~["TEXTAREA", "INPUT"].indexOf(e.target.tagName);
  if(e.key === " " && !isInput){
    // resetUI();
    console.log("u clicked spacebar, and it wasn't in an input");
  }
});

<input />

js - 按空格键触发通用功能按下文档

2 个答案: