当我将EventListener从“ click”更改为“ keydown”时，代码停止工作

问题描述

单击下面的代码段可以成功地更改块在网格中的位置（在网格上）。

但是，我打算在按某个键时这样做。碰巧，当我将EventListener从“ click”更改为“ keydown”时，如果在运行脚本时按下笔记本电脑的任意键，将无响应。

我认为元素出了点问题（我需要关注它？怎么做？），或者文档某种程度上无法识别按键输入。我该怎么办才能解决此问题？

let x = 5;
let y = 5;

function CreateSnake(){
  tabuleiro.appendChild(snake);
   snake.style.gridColumnStart = x;
   snake.style.gridRowStart = y;

   snake.classList.add("snake");
  };

  tabuleiro.addEventListener("click",function(){
      moveSnakeRight();
      remove()
    });

function moveSnakeRight(){
  if ( x < 10)
  console.log(x++)
;
}

function remove(){
  snake.remove()
}

解决方法

我的猜测是您的keydown事件监听器位于错误的元素上。为了处理keydown事件，该元素必须能够接收焦点（设置tabindex）。请参见以下演示：https://jsfiddle.net/mqe59dL6/

const noFocus = document.getElementById('noFocus');
const focus = document.getElementById('focus');

function handler(event) {
    event.cancelBubble = true;
    console.log(event.target.id || 'document',event.keyCode);
}

noFocus.addEventListener('keydown',handler);
focus.addEventListener('keydown',handler);
document.addEventListener('keydown',handler);

#noFocus {
  height: 60px;
  background-color: #aff;
  padding: 10px;
}

#focus {
  height: 60px;
  background-color: #faf;
  padding: 10px;
}

<div id="noFocus">
  I can't receive focus. Events will go to the document.
</div>
<div id="focus" tabindex="0">
  I can receive focus,click on me first.
</div>

一种替代方法是改为在document上处理事件。尝试document.addEventListener("keydown",...)。