JavaScript Document pointerlockchange Event

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

console.log("Listener attached");

const stage = document.getElementById("stage");
const btn = document.getElementById("toggle");

document.addEventListener("pointerlockchange", () => {
  console.log("locked?", !!document.pointerLockElement);
});

btn.addEventListener("click", () => {
  if (document.pointerLockElement) {
    document.exitPointerLock();
  } else {
    stage.requestPointerLock();
  }
});

const ok =
  "pointerLockElement" in document &&
  typeof document.documentElement.requestPointerLock === "function";

console.log("Pointer Lock usable:", ok);

if (!ok) {
  console.log("Hide or disable the lock control");
}