JavaScript Element requestPointerLock() Method

What You’ll Learn

Element.requestPointerLock() is an instance method from the Pointer Lock API. It locks the mouse pointer on an element—ideal for FPS games and 3D viewers. Learn Promise handling, unadjustedMovement, pointerlockchange events, and five try-it labs.

Introduction

First-person games and 3D demos often need the mouse to control a camera without the cursor leaving the game area or hitting the screen edge. requestPointerLock() hides the pointer and reports movement through movementX and movementY on pointermove events.

The call is asynchronous: it returns a Promise. MDN also recommends listening for pointerlockchange and pointerlockerror on document to track success or failure across browsers. You must call it from a user gesture.

This page is part of JavaScript Element. Related: releasePointerCapture(), requestFullscreen(), and the JavaScript hub.

Understanding the requestPointerLock() Method

Calling el.requestPointerLock() (or with an options object) asks the browser to confine pointer events to that element and hide the system cursor.

• It is an instance method on Element (Pointer Lock API).
• Returns a Promise resolved with undefined on success (MDN).
• Requires transient user activation (MDN).
• Movement is read via movementX / movementY on pointer events.
• Option unadjustedMovement: true disables OS mouse acceleration (MDN).
• Listen for pointerlockchange and pointerlockerror on document.

📝 Syntax

General forms of Element.requestPointerLock (MDN):

requestPointerLock()
requestPointerLock(options)

Parameters

• options (optional) — object with:
  • unadjustedMovement — boolean, default false. When true, disables OS mouse acceleration for raw input (MDN).

Return value

A Promise resolved with undefined when the lock succeeds (MDN).

Exceptions

• The promise may reject if the request fails. Also handle pointerlockerror on document for broader browser support (MDN).

Common patterns

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

// Basic — call from a click handler
canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

// Raw mouse input for FPS games
canvas.requestPointerLock({ unadjustedMovement: true });

// Check lock state
if (document.pointerLockElement === canvas) {
  document.exitPointerLock();
}

Examples Gallery

Examples follow MDN Element.requestPointerLock() patterns. Use View Output or Try It Yourself for each case.

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

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

Pointer locked on #canvas after click (Esc to exit).

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});

Raw input mode when browser supports unadjustedMovement.

let yaw = 0;

document.addEventListener("pointermove", (event) => {
  if (document.pointerLockElement !== canvas) return;
  yaw += event.movementX * 0.1;
  canvas.style.transform = `rotate(${yaw}deg)`;
});

Canvas rotates as you move the mouse while locked.

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

document.addEventListener("pointerlockchange", () => {
  if (document.pointerLockElement) {
    status.textContent = "Locked: " + document.pointerLockElement.id;
  } else {
    status.textContent = "Pointer unlocked";
  }
});

Locked: canvas  (or "Pointer unlocked")

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

document.pointerLockElement becomes null.

🚀 Common Use Cases

• First-person shooter camera control on a game canvas.
• 3D model viewers that need unlimited mouse rotation.
• Architectural walkthroughs and virtual tours in the browser.
• Map applications with drag-to-look navigation.
• Creative tools that use relative pointer motion while drawing.
• Teaching the Pointer Lock API with movement and event patterns.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN. Limited availability (not Baseline).
• Returns a Promise (MDN). Also listen for pointerlockchange / pointerlockerror.
• Requires transient user activation (MDN).
• Iframes need the allow-pointer-lock sandbox token (MDN).
• Only one element can be pointer-locked at a time.
• Pair with document.exitPointerLock() and check document.pointerLockElement.
• Related: releasePointerCapture(), requestFullscreen(), JavaScript hub.

💡 Best Practices