将箭头键按下绑定到某个 div，无论焦点是什么

Question

我有一个 html5 视频 canvas，我希望它能对所有按键做出反应，尤其是箭头键，无论焦点在什么地方。我该怎么做？

Answer 1

利用事件冒泡。箭头键的键码是 37-40。现在，当任何页面元素收到 keydown 事件时，它将冒泡到 window 对象，并在那里进行处理。届时，将检查该键是否为方向键（您需要根据需要填写大小写）。

  window.addEventListener("keydown", function(evt){
     alert(evt.which);
     switch(evt.which){
       case 37:
          alert("Left arrow key pressed!");
          break;
       case 38:
          alert("Up arrow key pressed!");
          break;
       case 39:
          alert("Right arrow key pressed!");
          break;              
       case 40:
          alert("Down arrow key pressed!");
          break; 
       default:
       break;
     }
  });

参见：https://jsfiddle.net/avbto94z/8/ 例如 canvas。请注意，页面上还有其他几个元素。单击或使用 Tab 键将焦点移动到 canvas 旁边的元素，然后按键盘上的键。

将箭头键按下绑定到某个 div，无论焦点是什么

Bind arrow key presses to a certain div no matter what is in focus

javascript

jquery

keypress