如何在普通网页用原生JS监听Oculus控制器事件并重映射按键

非沉浸式浏览普通2D网页的场景下，无法通过普通DOM事件监听直接捕获Oculus控制器输入，也不存在纯Vanilla JS的通用方案能重映射主摇杆、覆盖浏览器默认的滚动行为，具体原因和可尝试的有限方案如下：

为什么普通document.addEventListener监听不到 #

• VR浏览器（Meta Quest Browser、Firefox Reality等）在非沉浸式模式下，会在内核层直接拦截控制器的摇杆、按键输入，优先映射为页面滚动、前进后退等系统级浏览操作，这些原始输入事件根本不会冒泡到Web页面的DOM层，绑定keydown、click、touchmove这类常规DOM事件完全无法捕获控制器操作。

仅有的原生JS实现思路 #

你可以用W3C标准的Gamepad API尝试读取控制器状态，不需要引入A-Frame之类的第三方库，参考实现：

// 监听控制器连接事件
window.addEventListener('gamepadconnected', () => {
  // 连接成功后启动帧轮询读取控制器状态
  checkInputLoop();
});

function checkInputLoop() {
  const connectedGamepads = navigator.getGamepads();
  for (const gamepad of connectedGamepads) {
    // 过滤Oculus/Meta控制器
    if (!gamepad || (!gamepad.id.includes('Oculus') && !gamepad.id.includes('Meta Quest'))) continue;
    
    // 主摇杆垂直方向值通常存在axes[1]，范围-1~1，1为完全向下推，-1为完全向上推
    const stickVertical = gamepad.axes[1];
    // 设置0.2的阈值过滤摇杆漂移
    if (Math.abs(stickVertical) > 0.2) {
      // 注意：非沉浸式模式下这里的preventDefault无法阻止默认滚动
      // 在此处写入你的自定义业务逻辑
      console.log('主摇杆垂直偏移值：', stickVertical);
    }
  }
  requestAnimationFrame(checkInputLoop);
}

该方案的明确限制 #

• 无法阻止默认滚动：非沉浸式模式下，浏览器的默认滚动行为在输入到达Web内容层之前就已经触发，JS层读到摇杆状态时滚动已经发生，preventDefault()对这类输入完全无效，做不到重映射后不触发滚动的效果。
• 兼容性不稳定：部分版本的VR浏览器在非沉浸式模式下不会把控制器对象暴露给navigator.getGamepads()，只有调用XR接口进入沉浸式VR会话后，页面才能拿到完整的控制器输入权限，此时才能完全接管控制器、禁用默认操作。
• 不存在跨任意网站生效的纯Web方案：浏览器没有给Web内容开放内核层输入映射的修改权限，要全局重映射摇杆操作，只能通过Quest系统自带的控制器自定义功能、或者系统级输入重映射工具在上层拦截实现。

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