Pointer Lock API（2/3）：属性、方法、事件

Pointer Lock API 提供了三个属性、两个方法、两个事件

Tabel Of Content

• 属性
  • Document.pointerLockElement
  • Document.onpointerlockchange
  • Document.onpointerlockerror
• 方法
  • Element.requestPointerLock()
  • Document.exitPointerLock()
• 事件
  • Document: pointerlockchange
  • Document: pointerlockerror

属性

• Document.pointerLockElement

  语法

  var element = document.pointerLockElement;
  

  返回值

  一个元素Element 或者 空值null

• Document.onpointerlockchange

• Document.onpointerlockerror

方法

• Element.requestPointerLock()

  语法

  instanceOfElement.requestPointerLock();
  

  说明

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

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

exitpointerlock

语法

document.exitPointerLock();

说明

exitPointerLock()方法异步释放以前通过Element.requestPointerLock请求的指针锁。

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

事件

Document: pointerlockchange

说明

当指针被锁定/解锁时，将触发pointerlockchange事件。

示例

使用addEventListener()

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

使用 onpointerlockchange 事件处理属性：

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

• Document: pointerlockerror

  说明

  当锁定指针失败时(出于技术原因或权限被拒绝)，将触发pointerlockerror事件。

  示例

  使用addEventListener()

  const para = document.querySelector('p');
  
  document.addEventListener('pointerlockerror', (event) => {
    console.log('Error locking pointer');
  });
  

  使用 onpointerlockerror 事件处理属性：

  document.onpointerlockerror = (event) => {
  console.log('Error locking pointer');
  };