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() 方法允许您异步请求指针锁定在给定的元素上。

    要跟踪请求的成功或失败,有必要在文档级别侦听pointerlockchangepointerlockerror事件。

exitpointerlock

语法

document.exitPointerLock();

说明

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

要跟踪请求的成功或失败,有必要侦听pointerlockchangepointerlockerror事件。

事件

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');
    };
    
原文地址:https://www.cnblogs.com/jaycethanks/p/12060787.html