The (formerly called ) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. 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. It is ideal for first person 3D games, for example. Pointer Lock API Mouse Lock API More than that, the API is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button clicking. The buttons are then freed up for other actions. Other examples include apps for viewing maps or satellite imagery. 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 can now 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. Basic concepts Pointer lock is related to . 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: mouse capture 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. Method/properties overview This section provides a brief description of each property and method related to the pointer lock specification. requestPointerLock() The Pointer lock API, similar to the , extends DOM elements by adding a new method, .  As it has recently unprefixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a canvas element: Fullscreen API requestPointerLock() canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock;

canvas.requestPointerLock() If a user has exited pointer lock via the , or pointer lock has not previously been entered for this document, an event generated as a result of an must be received by the document before will succeed. (from ) default unlock gesture engagement gesture requestPointerLock https://w3c.github.io/pointerlock/#extensions-to-the-element-interface pointerLockElement and exitPointerLock() The Pointer lock API also extends the 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 and the new method on is and, as the name implies, it is used to exit the pointer lock. Document pointerLockElement Document exitPointerLock() The 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. pointerLockElement Here is an example of using : pointerLockElement ( .pointerLockElement === canvas || .mozPointerLockElement === canvas) { .log( );
} { .log( );
} if document document console 'The pointer lock status is now locked' else console 'The pointer lock status is now unlocked' The method is used to exit pointer lock, and like , works asynchronously using the and events, which you'll see more about below. Document.exitPointerLock() requestPointerLock pointerlockchange pointerlockerror .exitPointerLock = .exitPointerLock    || .mozExitPointerLock; .exitPointerLock(); document document document // Attempt to unlock document pointerlockchange event When the Pointer lock state changes—for example, when calling , , the user pressing the ESC key, etc.—the event is dispatched to the . This is a simple event and contains no extra data. requestPointerLock() exitPointerLock() pointerlockchange document ( ) { .addEventListener( , lockChangeAlert, );
} ( ) { .addEventListener( , lockChangeAlert, );
} { ( .pointerLockElement === canvas || .mozPointerLockElement === canvas) { .log( ); } { .log( ); }
} if "onpointerlockchange" in document document 'pointerlockchange' false else if "onmozpointerlockchange" in document document 'mozpointerlockchange' false ( ) function lockChangeAlert if document document console 'The pointer lock status is now locked' // Do something useful in response else console 'The pointer lock status is now unlocked' // Do something useful in response pointerlockerror event When there is an error caused by calling or , the event is dispatched to the . This is a simple event and contains no extra data. requestPointerLock() exitPointerLock() pointerlockerror document .addEventListener( , lockError, ); .addEventListener( , lockError, ); {
  alert( ); 
} document 'pointerlockerror' false document 'mozpointerlockerror' false ( ) function lockError e "Pointer lock failed" : until Firefox 50 the above events were prefixed with moz in Firefox. Note Extensions to mouse events The Pointer lock API extends the normal interface with movement attributes. Two new attributes to mouse events— and —provide the change in mouse positions. MouseEvent movementX movementY The values of the parameters are the same as the difference between the values of properties, and , which are stored in two subsequent events, eNow and ePrevious. In other words, the Pointer lock parameter . MouseEvent screenX screenY mousemove movementX = eNow.screenX - ePrevious.screenX When Pointer lock is enabled, the standard properties , , , and are held constant, as if the mouse is not moving. The and properties continue to provide the mouse's change in position. Locked state MouseEvent clientX clientY screenX screenY movementX movementY There is no limit to and 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. movementX movementY Unlocked state The parameters and are valid regardless of the mouse lock state, and are available even when unlocked for convenience. movementX movementY When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, and could be set to zero. movementX movementY Simple example walkthrough We've written a to show you how to use it to set up a simple control system ( ). The demo looks like this: simple pointer lock demo see source code This demo uses JavaScript to draw a ball on top of an element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works. <canvas> We set initial x and y positions on the canvas: x = ; y = ; var 50 var 50 The pointer lock methods are currently prefixed, so next we'll fork them for the different browser implementations. canvas.requestPointerLock = canvas.requestPointerLock ||
                            canvas.mozRequestPointerLock; .exitPointerLock = .exitPointerLock || .mozExitPointerLock; document document document Now we set up an event listener to run the method on the canvas when it is clicked, which initiates pointer lock. requestPointerLock() canvas.onclick = {
  canvas.requestPointerLock();
} ( ) function Now for the dedicated pointer lock event listener: . When this occurs, we run a function called to handle the change. pointerlockchange lockChangeAlert() .addEventListener( , lockChangeAlert, ); .addEventListener( , lockChangeAlert, ); // pointer lock event listener // Hook pointer lock state change events for different browsers document 'pointerlockchange' false document 'mozpointerlockchange' false This function checks the pointLockElement property to see if it is our canvas. If so, it attached an event listener to handle the mouse movements with the function. If not, it removes the event listener again. updatePosition() { ( .pointerLockElement === canvas || .mozPointerLockElement === canvas) { .log( ); .addEventListener( , updatePosition, );
  } { .log( ); .removeEventListener( , updatePosition, );
  }
} ( ) function lockChangeAlert if document document console 'The pointer lock status is now locked' document "mousemove" false else console 'The pointer lock status is now unlocked' document "mousemove" false The updatePosition() function updates the position of the ball on the canvas ( and ), and also includes statements to check whether the ball has gone off the edges of the canvas. If so, it makes the ball wrap around to the opposite edge. x y if() It also includes a check whether a call has previously been made, and if so, calls it again as required, and calls the function that updates the canvas scene. A tracker is also set up to write out the X and Y values to the screen, for reference. requestAnimationFrame() canvasDraw() tracker = .getElementById( ); animation; {
  x += e.movementX;
  y += e.movementY; (x > canvas.width + RADIUS) {
    x = -RADIUS;
  } (y > canvas.height + RADIUS) {
    y = -RADIUS;
  } (x < -RADIUS) {
    x = canvas.width + RADIUS;
  } (y < -RADIUS) {
    y = canvas.height + RADIUS;
  }
  tracker.textContent = + x + + y; (!animation) {
    animation = requestAnimationFrame( {
      animation = ;
      canvasDraw();
    });
  }
} var document 'tracker' var ( ) function updatePosition e if if if if "X position: " ", Y position: " if ( ) function null The function draws the ball in the current and positions: canvasDraw() x y {
  ctx.fillStyle = ;
  ctx.fillRect( , , canvas.width, canvas.height);
  ctx.fillStyle = ;
  ctx.beginPath();
  ctx.arc(x, y, RADIUS, , degToRad( ), );
  ctx.fill();
} ( ) function canvasDraw "black" 0 0 "#f00" 0 360 true 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 , is expected to appear in Chrome soon. <iframe sandbox="allow-pointer-lock"> Specifications Browser compatibility Element.requestPointerLock See also MouseEvent Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API Published under licence Open CC Attribution ShareAlike 3.0

Ball

Mozilla

Target

Pointer Lock API: How to Control Mouse Cursor

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps