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

Question

我有一个html5视频画布，我希望它对所有按键做出反应，尤其是箭头键，无论焦点是什么。我将如何做到这一点？

Answer 1

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

  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 键将焦点移动到画布旁边的元素，然后按键盘上的键。