JavaScript Document exitPointerLock() Method

What You’ll Learn

document.exitPointerLock() is an instance method that asynchronously releases pointer lock (see MDN Document: exitPointerLock()). Learn that it returns undefined, how it pairs with Element.requestPointerLock() and pointerLockElement, why you listen for pointerlockchange / pointerlockerror, and five try-it labs.

Introduction

Pointer lock hides the system cursor and feeds raw mouse movement to a page — perfect for first-person games and 3D viewers. You lock with element.requestPointerLock(). To unlock from script, call document.exitPointerLock().

MDN: this method asynchronously releases a pointer lock previously requested through Element.requestPointerLock. Note the split API: request on an element, exit on the document.

Related tutorials: pointerLockElement, requestPointerLock(), exitFullscreen().

Understanding document.exitPointerLock()

An instance method on the page’s document object (Pointer Lock API; MDN).

• Parameters — none (MDN).
• Return value — undefined (MDN: None).
• Async — release happens asynchronously; do not expect a Promise from this method (MDN).
• Success / failure — listen for pointerlockchange and pointerlockerror (MDN).
• Status — read document.pointerLockElement (non-null while locked).
• User unlock — Esc typically releases the lock without your call.

📝 Syntax

General form of Document.exitPointerLock (MDN):

exitPointerLock()

Parameters

None (MDN).

Return value

None (undefined) (MDN).

Tracking the result (MDN)

Because there is no Promise, subscribe to document events:

document.addEventListener("pointerlockchange", () => {
  console.log(
    document.pointerLockElement
      ? "locked on " + document.pointerLockElement.id
      : "unlocked"
  );
});

document.addEventListener("pointerlockerror", () => {
  console.error("pointer lock failed");
});

if (document.pointerLockElement) {
  document.exitPointerLock();
}

⚖️ Pointer lock vs fullscreen vs PiP

Examples Gallery

Examples follow MDN Document: exitPointerLock() and practical Pointer Lock patterns. Locking usually needs a user gesture and a supporting desktop browser.

document.getElementById("unlock").addEventListener("click", () => {
  if (document.pointerLockElement) {
    document.exitPointerLock();
    console.log("exitPointerLock() called");
  } else {
    console.log("not locked");
  }
});

not locked
(or "exitPointerLock() called" while locked)

const status = document.getElementById("status");

function updateStatus() {
  status.textContent = document.pointerLockElement
    ? "locked: " + document.pointerLockElement.id
    : "unlocked";
}

document.addEventListener("pointerlockchange", updateStatus);
updateStatus();

document.getElementById("unlock").addEventListener("click", () => {
  if (document.pointerLockElement) {
    document.exitPointerLock();
  }
});

unlocked
(or "locked: stage" while active)

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

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

Toggles between locked and unlocked
(watch pointerlockchange / Esc)

const out = document.getElementById("out");

document.addEventListener("pointerlockerror", () => {
  out.textContent = "pointerlockerror fired";
});

document.addEventListener("pointerlockchange", () => {
  out.textContent = document.pointerLockElement
    ? "locked"
    : "unlocked (or lock ended)";
});

unlocked (or lock ended)
(or "pointerlockerror fired" if a request fails)

const canExit = typeof document.exitPointerLock === "function";
const canEnter =
  typeof Element !== "undefined" &&
  typeof Element.prototype.requestPointerLock === "function";

console.log({ canExit, canEnter });

{ canExit: true, canEnter: true }
(values depend on browser / platform)

🚀 Common Use Cases

• FPS / 3D games — Unlock when pausing or opening a menu.
• Canvas viewers — Release lock when leaving orbit / look controls.
• Toggle buttons — One control that locks or unlocks based on status.
• Route / scene changes — Exit lock before navigating away.
• Accessibility — Always offer Esc and a visible Unlock path.
• Not a fullscreen exit — Use exitFullscreen() for fullscreen separately.

📝 Notes

• MDN: Limited availability (not Baseline) — feature-detect in production.
• MDN: no parameters; return value is undefined (not a Promise).
• MDN: track success/failure with pointerlockchange and pointerlockerror.
• MDN: request on an element; exit on the document.
• Esc typically unlocks — keep UI event-driven.
• Related: pointerLockElement, requestPointerLock(), exitFullscreen().

💡 Best Practices