无需聚焦输入框，页面全局监听方向键触发事件实现求助

嘿，我懂你想要的效果——不用特意把鼠标聚焦在输入框或者其他元素上，直接按键盘方向键就能触发页面上的自定义事件对吧？你之前写的keyPress事件没生效，其实是踩了这个事件的“坑”啦。

为什么keyPress监听不到方向键？ #

keyPress事件的设计初衷是用来捕获可打印字符的输入（比如字母、数字、标点符号这类能输出内容的按键），像方向键（ArrowLeft、ArrowRight这类）、功能键（Ctrl、Shift）这类非字符键，keyPress是完全监听不到的。而且这个事件在现代浏览器里已经处于被弃用的状态，不太推荐使用了。

正确的解决方案：用keydown或keyup绑定全局事件 #

我们可以直接给window或者document绑定keydown（按键按下时触发）或keyup（按键松开时触发）事件，这样不管页面上有没有元素获得焦点，只要按下方向键就能触发我们的逻辑。

举个简单的例子：

// 给window绑定keydown事件，监听全局按键
window.addEventListener('keydown', (e) => {
  switch(e.key) {
    case "ArrowLeft":
      console.log("左方向键被按下啦！");
      // 在这里编写你要触发的自定义逻辑
      break;
    case "ArrowRight":
      console.log("右方向键被按下啦！");
      break;
    case "ArrowUp":
      console.log("上方向键被按下啦！");
      break;
    case "ArrowDown":
      console.log("下方向键被按下啦！");
      break;
  }
});

额外注意：阻止默认行为避免冲突 #

如果你的页面里有滚动条、输入框这类本身会响应方向键的元素，可能会出现自定义事件和默认行为冲突的情况（比如按左方向键时页面同时往左滚动）。这时候可以用e.preventDefault()来阻止默认行为：

window.addEventListener('keydown', (e) => {
  if (e.key === "ArrowLeft") {
    e.preventDefault(); // 阻止页面默认的滚动行为
    console.log("左方向键触发了我的自定义事件！");
  }
});

这样调整之后，你就能实现无需聚焦元素，直接用方向键触发事件的需求啦～

内容的提问来源于stack exchange，提问作者Fernando Antunes