Pointer Lock API

  • Revision slug: API/Pointer_Lock_API
  • Revision title: Pointer Lock API
  • Revision id: 344355
  • Created:
  • Creator: princetoad@gmail.com
  • Is current revision? No
  • Comment

Revision Content

{{ SeeCompatTable() }}

Pointer lock (formerly called mouse lock) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.

This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.

For example, you can create apps that let your users control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. This kind of mouse input is quite handy for viewing maps, satellite imagery, or first-person scenes (such as in a game or an immersive video).

Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end. Without Pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. Game players will be particularly thrilled by this feature, as they can feverishly click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. A tragedy!

Basic concepts

Pointer Lock is related to mouse capture. Mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from mouse capture in the following ways:

  • It is persistent. Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.
  • It is not limited by browser or screen boundaries.
  • It continues to send events regardless of mouse button state.
  • It hides the cursor.

Example

The following is an example of how you can set up Pointer lock in your web page.

<button onclick="lockPointer();">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>

Method/properties overview

The Pointer lock API, similar to the Fullscreen API, extends DOM elements by adding a new method, requestPointerLock, which is vendor-prefixed for now. You write it as follows:

element.webkitRequestPointerLock(); // Chrome

element.mozRequestPointerLock(); // Firefox

Current implementations of requestPointerLock are tightly bound to requestFullScreen and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (pointerlockchange, pointerlockerror) indicating the success or failure of the request. This matches how the Fullscreen API works, with its requestFullScreen method and fullscreenchange and fullscreenerror events.

The Pointer lock API also extends the document interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named pointerLockElement, which is vendor-prefixed for now. The new method on document is exitPointerLock and, as the name implies, it is used to exit Pointer lock.

The pointerLockElement property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:

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
}

The document's exitPointerLock method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the pointerlockchange and pointerlockerror events:

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 event

When the Pointer lock state changes—for example, when calling requestPointerLock, exitPointerLock, the user pressing the ESC key, etc.—the pointerlockchange event is dispatched to the document. This is a simple event and contains no extra data.

This event is currently prefixed as mozpointerlockchange in Firefox and webkitpointerlockchange in Chrome. 

pointerlockerror event

When there is an error caused by calling requestPointerLock or exitPointerLock, the pointerlockerror event is dispatched to the document. This is a simple event and contains no extra data.

This event is currently prefixed as mozpointerlockerror in Firefox and webkitpointerlockerror in Chrome. 

Extensions to mouse events

The Pointer lock API extends the normal MouseEvent with movement attributes.

partial interface MouseEvent {
    readonly attribute long movementX;
    readonly attribute long movementY;
};
The movement attributes are currently prefixed as .mozMovementX and .mozMovementY in Firefox, and.webkitMovementX and .webkitMovementY in Chrome.

Two new parameters to mouse events—movementX and movementY—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of MouseEvent properties, screenX and screenY, which are stored in two subsequent mousemove events, eNow and ePrevious. In other words, the Pointer lock parameter movementX = eNow.screenX - ePrevious.screenX.

Locked state

When Pointer lock is enabled, the standard MouseEvent properties clientX, clientY, screenX, and screenY are held constant, as if the mouse is not moving. The movementX and movementY properties continue to provide the mouse's change in position. There is no limit to movementX and movementY values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.

Unlocked state

The parameters movementX and movementY are valid regardless of the mouse lock state, and are available even when unlocked for convenience.

When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, movementX and movementY could be set to zero.

iframe limitations

Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.

While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in Chrome soon.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

Targeting 23{{ property_prefix("webkit") }}*

See CR/72574

{{ CompatGeckoDesktop("14.0") }}

{{ mozbug("633602") }}

{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

* Requires the feature be enabled in about:flags or Chrome started with the --enable-pointer-lock flag.

See also

{{ spec("http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html", "W3C Pointer Lock API Specification", "ED") }}

MouseEvent

Revision Source

<p>{{ SeeCompatTable() }}</p>
<p><strong>Pointer lock</strong> (formerly called mouse lock) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.</p>
<p>This API is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling.</p>
<p>For example, you can create apps that let your users control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. This kind of mouse input is quite handy for viewing maps, satellite imagery, or first-person scenes (such as in a game or an immersive video).</p>
<p>Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end. Without Pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. Game players will be particularly thrilled by this feature, as they can feverishly click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. A tragedy!</p>
<h2 id="basics" name="basics">Basic concepts</h2>
<p>Pointer&nbsp;Lock is related to <a href="/en/DOM/element.setCapture" title="element.setCapture">mouse capture</a>. Mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released. Pointer lock is different from mouse capture in the following ways:</p>
<ul>
  <li>It is persistent.&nbsp;Pointer lock does not release the mouse until an explicit API call is made or the user uses a specific release gesture.</li>
  <li>It is not limited by browser or screen boundaries.</li>
  <li>It continues to send events regardless of mouse button state.</li>
  <li>It hides the cursor.</li>
</ul>
<h2 id="example" name="example">Example</h2>
<p>The following is an example of how you can set up Pointer&nbsp;lock in your web page.</p>
<pre class="brush: js">
&lt;button onclick="lockPointer();"&gt;Lock it!&lt;/button&gt;
&lt;div id="pointer-lock-element"&gt;&lt;/div&gt;
&lt;script&gt;
// 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) {
&nbsp; var movementX = e.movementX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.mozMovementX&nbsp;&nbsp;&nbsp; ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.webkitMovementX ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; movementY = e.movementY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.mozMovementY&nbsp;&nbsp;&nbsp; ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.webkitMovementY ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0;

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

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

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

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

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

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

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

function lockPointer() {
&nbsp; elem = document.getElementById("pointer-lock-element");
&nbsp; // Start by going fullscreen with the element.&nbsp; Current implementations
&nbsp; // require the element to be in fullscreen before requesting pointer
&nbsp; // lock--something that will likely change in the future.
&nbsp; elem.requestFullscreen = elem.requestFullscreen&nbsp;&nbsp;&nbsp; ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elem.mozRequestFullscreen ||
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elem.mozRequestFullScreen || // Older API upper case 'S'.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elem.webkitRequestFullscreen;
&nbsp; elem.requestFullscreen();
}
&lt;/script&gt;
</pre>
<h2 id="method_overview" name="method_overview">Method/properties&nbsp;overview</h2>
<p>The Pointer lock API, similar to the Fullscreen API, extends DOM elements by adding a new method, <code>requestPointerLock</code>, which is vendor-prefixed for now. You write it as follows:</p>
<pre class="idl">
<span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">element.webkitRequestPointerLock(); // Chrome</span></span>

element.mozRequestPointerLock(); // Firefox
</pre>
<p>Current implementations of <code>requestPointerLock</code> are tightly bound to <code>requestFullScreen</code> and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (<code>pointerlockchange</code>, <code>pointerlockerror</code>) indicating the success or failure of the request. This matches how the Fullscreen API works, with its <code>requestFullScreen</code> method and <code>fullscreenchange</code> and <code>fullscreenerror</code> events.</p>
<p>The Pointer lock API also extends the <code>document</code> interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named <code>pointerLockElement</code>, which is vendor-prefixed for now. The new method on <code>document</code> is <code>exitPointerLock</code>&nbsp;and, as the name implies, it is used to exit Pointer lock.</p>
<p>The <code>pointerLockElement</code> property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:</p>
<pre class="idl">
<span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement    ||
                              document.mozPointerLockElement ||
                              document.webkitPointerLockElement;</span></span>

// 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
}
</pre>
<p>The <code>document</code>'s <code>exitPointerLock</code> method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the <code>pointerlockchange</code> and <code>pointerlockerror</code> events:</p>
<pre class="idl">
<span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.exitPointerLock = document.exitPointerLock    ||
                           document.mozExitPointerLock ||
                           document.webkitExitPointerLock;</span></span>

function pointerLockChange() {
  <span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement    ||
                                document.mozPointerLockElement ||
                                document.webkitPointerLockElement;</span></span>

  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();
</pre>
<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2>
<p>When the Pointer lock state changes—for example, when calling <code>requestPointerLock</code>, <code>exitPointerLock</code>, the user pressing the ESC key, etc.—the&nbsp;<code>pointerlockchange</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
<div class="note">
  This event is currently prefixed as <code>mozpointerlockchange</code> in Firefox and <code>webkitpointerlockchange</code> in Chrome.&nbsp;</div>
<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2>
<p>When there is an error caused by calling <code>requestPointerLock</code> or <code>exitPointerLock</code>, the&nbsp;<code>pointerlockerror</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p>
<div class="note">
  This event is currently prefixed as <code>mozpointerlockerror</code> in Firefox and <code>webkitpointerlockerror</code> in Chrome.&nbsp;</div>
<h2 id="extensions" name="extensions">Extensions to mouse events</h2>
<p>The&nbsp;Pointer lock API extends the normal <code>MouseEvent</code> with movement attributes.</p>
<pre class="idl">
<span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> {
<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span>
<span class="idlAttribute">    readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span>
};</span></pre>
<div class="note">
  The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div>
<p>Two new parameters to mouse events—<code>movementX</code>&nbsp;and&nbsp;<code>movementY</code>—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of&nbsp;<a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent"><code>MouseEvent</code></a>&nbsp;properties,&nbsp;<code>screenX</code>&nbsp;and&nbsp;<code>screenY</code>, which are stored in two subsequent&nbsp;<code>mousemove</code>&nbsp;events,&nbsp;<code>eNow</code>&nbsp;and&nbsp;<code>ePrevious</code>. In other words, the Pointer lock parameter&nbsp;<code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
<h3 id="locked_state" name="locked_state">Locked state</h3>
<p>When Pointer&nbsp;lock is enabled, the standard <code>MouseEvent</code> properties&nbsp;<code>clientX</code>, <code>clientY</code>, <code>screenX</code>, and <code>screenY</code> are held constant, as if the mouse is not moving. The <code>movementX</code> and <code>movementY</code> properties continue to provide the mouse's change in position. There is no limit to <code>movementX</code> and <code>movementY</code> values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.</p>
<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3>
<p>The parameters&nbsp;<code>movementX</code>&nbsp;and&nbsp;<code>movementY</code>&nbsp;are valid regardless of the mouse&nbsp;lock state, and are available even when unlocked for convenience.</p>
<p>When the&nbsp;mouse&nbsp;is unlocked, the system cursor can exit and re-enter the browser window. If that happens,&nbsp;<code>movementX</code>&nbsp;and&nbsp;<code>movementY</code>&nbsp;could be set to zero.</p>
<h2 id="iframe_limitations">iframe limitations</h2>
<p>Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.</p>
<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, is expected to appear in Chrome soon.</p>
<h2 id="Browser_compatibiltiy" name="Browser_compatibiltiy">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>
          <p>Targeting 23{{ property_prefix("webkit") }}*</p>
          <p>See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754">CR/72574</a></p>
        </td>
        <td>
          <p>{{ CompatGeckoDesktop("14.0") }}</p>
          <p>{{ mozbug("633602") }}</p>
        </td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>* Requires the feature be enabled in <code>about:flags</code> or Chrome started with the <code>--enable-pointer-lock</code> flag.</p>
<h2 id="See_also" name="See_also">See also</h2>
<p>{{ spec("http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html", "W3C Pointer Lock API Specification", "ED") }}</p>
<p><a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent">MouseEvent</a></p>
Revert to this revision