Pointer Lock API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more browser support for this feature? Tell us why.

Pointer lock ( Mouse lock) ( deltas)

App API App 3D

() App

Pointer lock 3D Pointer lock

<button >Lock it!</button>
<div id="pointer-lock-element"></div>
<script>
// Note: at the time of writing, only Mozilla and WebKit support Pointer Lock.

// The element we'll make fullscreen and pointer locked.
var elem;

document.addEventListener("mousemove", function(e) {
  var movementX = e.movementX       ||
                  e.mozMovementX    ||
                  e.webkitMovementX ||
                  0,
      movementY = e.movementY       ||
                  e.mozMovementY    ||
                  e.webkitMovementY ||
                  0;

  // Print the mouse movement delta values
  console.log("movementX=" + movementX, "movementY=" + movementY);
}, false);

function fullscreenChange() {
  if (document.webkitFullscreenElement === elem ||
      document.mozFullscreenElement === elem ||
      document.mozFullScreenElement === elem) { // Older API upper case 'S'.
    // Element is fullscreen, now we can request pointer lock
    elem.requestPointerLock = elem.requestPointerLock    ||
                              elem.mozRequestPointerLock ||
                              elem.webkitRequestPointerLock;
    elem.requestPointerLock();
  }
}

document.addEventListener('fullscreenchange', fullscreenChange, false);
document.addEventListener('mozfullscreenchange', fullscreenChange, false);
document.addEventListener('webkitfullscreenchange', fullscreenChange, false);

function pointerLockChange() {
  if (document.mozPointerLockElement === elem ||
      document.webkitPointerLockElement === elem) {
    console.log("Pointer Lock was successful.");
  } else {
    console.log("Pointer Lock was lost.");
  }
}

document.addEventListener('pointerlockchange', pointerLockChange, false);
document.addEventListener('mozpointerlockchange', pointerLockChange, false);
document.addEventListener('webkitpointerlockchange', pointerLockChange, false);

function pointerLockError() {
  console.log("Error while locking pointer.");
}

document.addEventListener('pointerlockerror', pointerLockError, false);
document.addEventListener('mozpointerlockerror', pointerLockError, false);
document.addEventListener('webkitpointerlockerror', pointerLockError, false);

function lockPointer() {
  elem = document.getElementById("pointer-lock-element");
  // Start by going fullscreen with the element. Current implementations
  // require the element to be in fullscreen before requesting pointer
  // lock--something that will likely change in the future.
  elem.requestFullscreen = elem.requestFullscreen    ||
                           elem.mozRequestFullscreen ||
                           elem.mozRequestFullScreen || // Older API upper case 'S'.
                           elem.webkitRequestFullscreen;
  elem.requestFullscreen();
}
</script>

/

Pointer lock API Fullscreen API requestPointerLock () DOM

element.webkitRequestPointerLock(); // Chrome
element.mozRequestPointerLock(); // Firefox
element.requestPointerLock(); // Standard

requestPointerLock requestFullScreen Fullscreen API Demo pointerlockchange pointerlockerror Fullscreen API ( requestFullScreen fullscreenchange fullscreenerror )

Pointer lock API and <table>) and provides functionality global to the document (suc">Document pointerLockElement ()and <table>) and provides functionality global to the document (suc">Document exitPointerLock Pointer lock

pointerLockElement ( Boolean )

document.pointerLockElement =
  document.pointerLockElement ||
  document.mozPointerLockElement ||
  document.webkitPointerLockElement;

// 1) Used as a boolean check: are we pointer locked?
if (!!document.pointerLockElement) {
  // pointer is locked
} else {
  // pointer is not locked
}

// 2) Used to access the pointer locked element
if (document.pointerLockElement === someElement) {
  // someElement is currently pointer locked
}

Document.exitPointerLock Pointer lock requestPointerLock Document.exitPointerLock pointerlockchange pointerlockerror

document.exitPointerLock =
  document.exitPointerLock ||
  document.mozExitPointerLock ||
  document.webkitExitPointerLock;

function pointerLockChange() {
  document.pointerLockElement =
    document.pointerLockElement ||
    document.mozPointerLockElement ||
    document.webkitPointerLockElement;

  if (!!document.pointerLockElement) {
    console.log("Still locked.");
  } else {
    console.log("Exited lock.");
  }
}

document.addEventListener("pointerlockchange", pointerLockChange, false);
document.addEventListener("mozpointerlockchange", pointerLockChange, false);
document.addEventListener("webkitpointerlockchange", pointerLockChange, false);

// Attempt to unlock
document.exitPointerLock();

pointerlockchange

Pointer lock requestPointerLock exitPointerLock ESC pointerlockchange document

Firefox mozpointerlockchange Chrome webkitpointerlockchange

pointerlockerror

requestPointerLock exitPointerLock pointerlockerror document

Firefox mozpointerlockerror Chrome webkitpointerlockerror

Pointer lock API MouseEvent

partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};

Firefox .mozMovementX .mozMovementY Chrome .webkitMovementX .webkitMovementY

( movementX movementY) MouseEvent ( screenX screenY) MouseEvent mousemove ( eNow ePrevious) Pointer lock movementX = eNow.screenX - ePrevious.screenX

Pointer lock MouseEvent clientX clientY screenX screenY movementX movementY movementX movementY

movementX movementY

iframe

Pointer lock iframe iframe iframe iframe Pointer lock iframe iframe

iframes (sandboxed) iframes Pointer lockChrome <iframe sandbox="allow-pointer-lock"> /

Specification
Pointer Lock 2.0

api.Document.exitPointerLock

api.Element.requestPointerLock

MouseEvent

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20241220 by MDN contributors.

View this page on GitHub Report a problem with this content