Document: pointerlockchange event

{{APIRef("Pointer Lock API")}}

The pointerlockchange event is fired when the pointer is locked/unlocked.

The event handler can use {{domxref("Document.pointerLockElement")}} to determine whether the pointer is locked, and if so, to which element it is locked.

This event is not cancelable and does not bubble.

Syntax

Use the event name in {{domxref("EventTarget/addEventListener", "addEventListener()")}}:

addEventListener("pointerlockchange", (event) => { })

Alternatively, assign to the event handler property of the interface:

onpointerlockchange = (event) => { }

Event type

A generic {{domxref("Event")}}.

Examples

Using addEventListener():

document.addEventListener("pointerlockchange", (event) => {
  if (document.pointerLockElement)
    console.log("The pointer is locked to: ", document.pointerLockElement);
  else {
    console.log("The pointer is not locked");
  }
});

Using the onpointerlockchange event handler property (but note that this replaces other event listeners added using onpointerlockchange, if any):

document.onpointerlockchange = (event) => {
  if (document.pointerLockElement)
    console.log("The pointer is locked to: ", document.pointerLockElement);
  else {
    console.log("The pointer is not locked");
  }
};

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Using Pointer Lock API