JavaScript Element requestPointerLock() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word REQUESTPOINTERLOCK

Definition

Element.requestPointerLock() asynchronously asks the browser to lock the pointer on that element (MDN). Listen on document for pointerlockchange and pointerlockerror.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.requestPointerLock. Start with this line.

JavaScript
element.requestPointerLock(options?)
CallWhat it does
element.requestPointerLock(options?)Primary signature.
el.requestPointerLock(...)Call with the arguments your case needs.

Built into the browser. Call requestPointerLock(...) on an Element — no import required.

Library declarations
JavaScript
element.requestPointerLock(options?)

Parameters

ParameterDescription
User gestureRequired. Transient activation (MDN)
Active documentRequired. Target must be in an active document
unadjustedMovementOptional. Raw mouse input (no OS acceleration)

Return Value

Return ValueDescription
*Promise<void> (MDN Promise version)

JavaScript Examples

Example 1 — Lock on Click

MDN pattern: request lock from a canvas click and await the Promise.

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

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
  console.log("locked?", !!document.pointerLockElement);
});
Try It Yourself

How It Works

  1. Click first. MDN requires transient user activation.
  2. Await the Promise. Resolves when the lock request succeeds (where supported).
  3. Check state. document.pointerLockElement should be the canvas.
  4. Also listen. Pair with pointerlockchange for engines that rely on events.

Example 2 — Raw Mouse Input

MDN: disable OS acceleration with unadjustedMovement: true.

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

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
  console.log("Locked with raw mouse input");
});
Try It Yourself

How It Works

  1. Pass options. Object form of requestPointerLock(options).
  2. unadjustedMovement. Turns off OS mouse acceleration (MDN).
  3. Use case. FPS camera look — same physical move → same rotation.
  4. Support varies. Still listen for errors if the option is ignored.

Example 3 — Track Change and Error

Confirm lock state with Document events — works even when Promise support differs.

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

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

document.addEventListener("pointerlockerror", () => {
  console.log("pointerlockerror fired");
});

canvas.addEventListener("click", () => {
  canvas.requestPointerLock();
});
Try It Yourself

How It Works

  1. Listen on document. MDN: track success/failure at Document level.
  2. Change. Fires on lock and unlock — check pointerLockElement.
  3. Error. Fires when the request fails; pointer stays unlocked.
  4. Request on click. Gesture improves success odds.
Compatibility

Browser Support

Element.requestPointerLock() is part of the Pointer Lock API. MDN marks it Limited availability (not Baseline). It is not Deprecated, Experimental, or Non-standard — still feature-detect in production.

✓ Limited availability · Not Baseline

Element.requestPointerLock()

Ask the browser to lock the pointer on an element. Requires a user gesture; confirm with Document events.

Limited Feature-detect required
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
requestPointerLock() Limited

Bottom line: Support mirrors Pointer Lock. Always feature-detect, require a click, and pair with pointerlockchange / pointerlockerror.

Frequently Asked Questions

It asynchronously asks the browser to lock the pointer on the given element (MDN). Track success with pointerlockchange and failure with pointerlockerror on document.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline) — feature-detect before relying on it.
MDN documents a Promise that resolves with undefined on success. Some browsers still communicate mainly via pointerlockchange / pointerlockerror — listen for both.
Yes. MDN: transient user activation is required. Call it from a click or other gesture on an active document.
An optional option that disables OS mouse acceleration and uses raw input (MDN). Set { unadjustedMovement: true } for FPS-style camera control.
Press Esc (default unlock gesture) or call document.exitPointerLock(). Listen for pointerlockchange and check document.pointerLockElement.

Next: Element scroll()

Learn how to scroll an element to a given position.

scroll() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element requestFullscreen() Method JavaScript Element scroll() Method