Question

当使用下面的代码在页面上按Enter键时，页面将进入全屏幕并指针锁定。移动鼠标将导致“mousemove”输出到控制台。关键事件工作正常，但我已全屏删除关键事件以简化示例。我的问题是，如果按住任何键然后移动鼠标，则不会触发mousemove事件。这是全屏第一人称体验的问题，因为这意味着用户无法同时移动和查看！在Firefox 23和Chrome 29,30和31中进行了测试。

更新：只有戴尔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>

Answer 1

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

当任何键按下全屏+指针锁时，Mousemove不会触发

1 个答案: