无论焦点是什么，将箭头键按下到某个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键将焦点移动到画布旁边的元素，然后按键盘上的键。