pointerLockElement在requestPointerLock()函数之后立即调用时返回null

Question

PointerLockElement在requestPointerLock()函数之后立即调用时返回null

domElement.onclick = () => { // requestPointerLock() needs to be called by user input
domElement.requestPointerLock = domElement.requestPointerLock || domElement.mozRequestPointerLock;
domElement.requestPointerLock();
console.log(document.pointerLockElement || document.mozPointerLockElement); // return null
}

Answer 1

查看文档：

Element.requestPointerLock((方法允许您异步请求将指针锁定在给定元素上。

异步意味着，您不能一个接一个地调用这些行：

domElement.requestPointerLock();
document.pointerLockElement || document.mozPointerLockElement;

在执行第二行的那一刻，第一条语句可能还没有完成。

文件中还提到：

要跟踪请求的成功或失败，有必要在文档级别侦听pointerlockchange和pointerlockerror事件。

使用pointerlockchange-docs:中所示的实现

document.addEventListener('pointerlockchange', (event) => {
console.log('Pointer lock changed');
});