如何使用Javascript禁用网页键盘快捷键 解决网页游戏误触问题

注意：仅建议在游戏激活的场景下开启快捷键拦截，避免影响用户正常的浏览器操作习惯

• 核心实现逻辑是监听keydown事件，匹配到目标快捷键后调用preventDefault()阻止默认行为，同时调用stopPropagation()避免事件冒泡到浏览器层。

具体代码示例：

// 配置需要拦截的快捷键规则，可根据游戏实际需求增减
const blockedShortcuts = [
  { key: 'w', altKey: true }, // 拦截Alt+W
  { key: 'r', ctrlKey: true }, // 拦截Ctrl+R刷新
  { key: 'f4', altKey: true }, // 拦截Alt+F4
  { key: 'tab', ctrlKey: true } // 拦截Ctrl+Tab切换标签
]

document.addEventListener('keydown', (e) => {
  // 可选判断：仅在游戏画布处于激活状态时才拦截，避免影响用户在页面其他输入框的操作
  const isGameActive = document.activeElement === document.querySelector('#game-canvas')
  if (!isGameActive) return

  // 匹配是否属于需要拦截的快捷键
  const isBlocked = blockedShortcuts.some(rule => {
    return e.key.toLowerCase() === rule.key.toLowerCase()
        && !!e.altKey === !!rule.altKey
        && !!e.ctrlKey === !!rule.ctrlKey
        && !!e.shiftKey === !!rule.shiftKey
        && !!e.metaKey === !!rule.metaKey
  })

  if (isBlocked) {
    e.preventDefault()
    e.stopPropagation()
    return false
  }
})

存在限制：部分系统级、浏览器特权级快捷键无法通过JS拦截，比如Windows的Win键系列快捷键、macOS的Cmd+Q退出快捷键、部分浏览器版本的Ctrl+W关闭标签页快捷键，建议在游戏启动前给用户做引导提示，优先推荐用户开启全屏模式降低误触概率

• 优化建议：进入游戏全屏模式时绑定拦截事件，退出全屏时移除事件，避免影响用户正常浏览页面；只拦截游戏场景下高频误触的组合键即可，不要无差别拦截所有快捷键。

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