1

在请求指针锁定后尝试添加mousemove侦听器时，我观察到奇怪的行为。document

我已经实现了以下内容，主要基于 MDN 的文档：

  var onLockChange = () => {
    env.handlers.onLockChange.forEach(lis => { lis(); });
  };
  document.addEventListener('pointerlockchange', onLockChange, false);
  document.addEventListener('mozpointerlockchange', onLockChange, false);
  document.addEventListener('pointerlockerror', (e) => {
    console.error(e);
  }, false);

...

  var updatePosition = (e) => {
    console.log('EVENT!', e);
  };

  env.handlers.onLockChange.push(() => {
    console.log('INVOKED');
    if ( hasPointerLock() ) {
      document.addEventListener('mousemove', updatePosition, false);
      console.log('Added Listener');
    } else {
      document.removeEventListener('mousemove', updatePosition, false);
      console.log('Removed Listener');
    }
  })

  canvas.onclick = () => {
    if ( ! hasPointerLock() ) {
      canvas.requestPointerLock();
    }
  };

我看到控制台日志完全符合我的预期。当我在画布元素上计时时，指针被困住，我看到：

INVOKED
Added Listener

但我从来没有见过EVENT!。

为了让事情变得更奇怪，如果我注释掉对我的调用，document.removeEventListener我观察到 mousemove 事件被捕获但仅在锁定关闭时。

4

2 回答 2

2

这是谷歌浏览器中的一个错误。

mousemove在以下情况下不会触发： - 控制台打开，并且 - 指针被锁定

由于我在调试代码时一直打开控制台，因此我认为我的代码无法正常工作。

我花了一个小时试图弄清楚这件事。希望下一个人不必这样做。

于 2020-05-24T22:26:54.597 回答
0

尝试使用event.movementXandevent.movementY而不是clientX/ clientY。

于 2021-07-29T22:33:49.107 回答