onMouseMove 侦听器仅在光标离开并重新进入文档后才开始接收事件

Question

我有 CanvasElement，它在单击时请求指针锁定，然后使用onMouseMove侦听器重复将 movementX 和 movementY 传递给函数（我正在测试第一人称控件）。

它第一次工作正常（页面加载后立即），但是如果我按 esc 并再次单击画布，它会成功锁定光标，但不会生成要传递给onMouseMove侦听器的MouseEvent。

如果我按 Esc 并将鼠标移动到文档之外（不受标记控制的任何位置），将其移回文档中并单击画布，一切将再次完美运行。

知道是什么导致了这种奇怪的行为吗？

_canvas.onMouseMove.listen((MouseEvent e) {
  if (document.pointerLockElement == _canvas) {
    print(e.movement); // debug print
    orientateCamera(e.movement);
  }
});
_canvas.onClick.listen((e) {
  if (document.pointerLockElement == null) {
    _canvas.requestPointerLock();
  }
});

所有描述的行为都包含在这些代码行中。

Answer 1

我不知道element.requestPointerLock()做什么，但是MDN - Element.requestPointerLock声明你应该监听pointerlockchange和pointerlockerror，看看请求是否成功。还有一个您似乎不使用的document.exitPointerLock()。

MDN 指针锁 API 似乎是一个很好的介绍。