鼠标在全屏+指针锁定状态下按下任何键时都不会启动

Mousemove not firing when any key held down in full screen + pointer lock

本文关键字：任何键 启动 状态 锁定 指针 鼠标      更新时间：2023-09-26

在带有以下代码的页面上按enter键时，页面将进入指针锁定的全屏状态。移动鼠标将导致"mousemove"输出到控制台。关键事件运行良好，不过为了简化示例，我在全屏中去掉了关键事件。我的问题是，如果按住任何键，然后移动鼠标，则不会触发mousemove事件。这对全屏第一人称体验来说是个问题，因为这意味着用户不能同时移动和观看！在Firefox 23和Chrome 29、30和31中进行了测试。

更新：这只发生在我的Dell Latitude E6510上的集成触摸板和/或笔尖上。如果我插入USB鼠标，它似乎可以正常工作。

关于为什么会发生这种情况和/或如何解决这种情况的想法值得赞赏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
var isPointerLockSupported = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
var isFullScreenSupported = 'fullScreenEnabled' in document || 'mozFullScreenEnabled' in document || 'webkitFullscreenEnabled' in document;
function rPL(element, onEnter) {
  var pointerlockchange = function (event) {
    if (document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element) {
      onEnter.call(element, event);
    }
    else {
      document.removeEventListener('pointerlockchange', pointerlockchange, false);
      document.removeEventListener('mozpointerlockchange', pointerlockchange, false);
      document.removeEventListener('webkitpointerlockchange', pointerlockchange, false);
    }
  };
  document.addEventListener('pointerlockchange', pointerlockchange, false);
  document.addEventListener('mozpointerlockchange', pointerlockchange, false);
  document.addEventListener('webkitpointerlockchange', pointerlockchange, false);
  element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
  element.requestPointerLock();
}
function rFS(element, onEnter) {
  var fullscreenchange = function(event) {
    if (document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
      onEnter.call(element, event);
    }
    else {
      document.removeEventListener('fullscreenchange', fullscreenchange, false);
      document.removeEventListener('mozfullscreenchange', fullscreenchange, false);
      document.removeEventListener('webkitfullscreenchange', fullscreenchange, false);
    }
  }
  document.addEventListener('fullscreenchange', fullscreenchange, false);
  document.addEventListener('mozfullscreenchange', fullscreenchange, false);
  document.addEventListener('webkitfullscreenchange', fullscreenchange, false);
  element.requestFullScreen = element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen;
  element.requestFullScreen(typeof Element.ALLOW_KEYBOARD_INPUT === 'undefined' ? undefined : Element.ALLOW_KEYBOARD_INPUT);
}
document.addEventListener('mousemove', function() {
  console.log('mousemove');
}, false);
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 && isFullScreenSupported && isPointerLockSupported) {
    var instructions = this;
    rFS(document.body, function() {
      rPL(document.body, function() {});
    });
  }
}, false);
    </script>
  </body>
</html>

触摸板唯一的问题是你的线索。尝试捕获ommousedown和onmouseup事件。您的事件之一是触发这些行为，这样您就不希望事件在鼠标按下时触发——只希望触发onclick或onmouseup事件。

相关文章：