js - 在 space 条上触发通用函数按文档上的任意位置

Question

我有一个猜色游戏，有六个不同颜色的方块，页面顶部有一个 rgb 代码。游戏正常运行，游戏通过函数重置 - resetUI() - 当点击页面上的重置按钮时。

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

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

我相当确定我对 "this" 的使用是错误的，但我想不出替代方案。

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

Answer 1

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

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

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

Answer 2

key 属于事件（传递给事件处理程序），而不是主体（this 所指的）。

您将遇到的下一个问题是，当您向页面添加输入或文本区域时，只要用户将 space 放入输入中，它就会运行您的功能。您可以检查针对目标以确保在您启动函数之前输入未接收到击键..

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 - 在 space 条上触发通用函数按文档上的任意位置

js - trigger generic function on space bar press anywhere on document

javascript

keydown

addeventlistener