René's URL Explorer Experiment


Title: Pointer Lock API - Web APIs | MDN

Open Graph Title: Pointer Lock API - Web APIs | MDN

Description: The Pointer Lock API (formerly called Mouse Lock API) 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.

Open Graph Description: The Pointer Lock API (formerly called Mouse Lock API) 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.

Opengraph URL: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

direct link

Domain: developer.mozilla.org

og:localeen_US
og:imagehttps://developer.mozilla.org/mdn-social-image.46ac2375.png
og:image:typeimage/png
og:image:height1024
og:image:width1024
og:image:altThe MDN logo
og:site_nameMDN Web Docs
twitter:cardsummary
twitter:creatorMozDevNet
position3

Links:

Skip to main contenthttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#content
Skip to searchhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#search
MDN https://developer.mozilla.org/en-US/
HTML: Markup languagehttps://developer.mozilla.org/en-US/docs/Web/HTML
Elementshttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
Global attributeshttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes
Attributeshttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes
See all…https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
Responsive imageshttps://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images
HTML cheatsheethttps://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet
Date & time formatshttps://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats
See all…https://developer.mozilla.org/en-US/docs/Web/HTML/Guides
SVGhttps://developer.mozilla.org/en-US/docs/Web/SVG
MathMLhttps://developer.mozilla.org/en-US/docs/Web/MathML
XMLhttps://developer.mozilla.org/en-US/docs/Web/XML
CSS: Styling languagehttps://developer.mozilla.org/en-US/docs/Web/CSS
Propertieshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties
Selectorshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors
At-ruleshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules
Valueshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values
See all…https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Box modelhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction
Animationshttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using
Flexboxhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts
Colorshttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color
See all…https://developer.mozilla.org/en-US/docs/Web/CSS/Guides
Column layoutshttps://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts
Centering an elementhttps://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element
Card componenthttps://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card
See all…https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook
JavaScript: Scripting languagehttps://developer.mozilla.org/en-US/docs/Web/JavaScript
Standard built-in objectshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
Expressions & operatorshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
Statements & declarationshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements
Functionshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
See all…https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Control flow & error handinghttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
Loops and iterationhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
Working with objectshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects
Using classeshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes
See all…https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Web APIs: Programming interfaceshttps://developer.mozilla.org/en-US/docs/Web/API
File system APIhttps://developer.mozilla.org/en-US/docs/Web/API/File_System_API
Fetch APIhttps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Geolocation APIhttps://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
HTML DOM APIhttps://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API
Push APIhttps://developer.mozilla.org/en-US/docs/Web/API/Push_API
Service worker APIhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
See all…https://developer.mozilla.org/en-US/docs/Web/API
Using the Web animation APIhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
Using the Fetch APIhttps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Working with the History APIhttps://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
Using the Web speech APIhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
Using web workershttps://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
All web technologyhttps://developer.mozilla.org/en-US/docs/Web
Accessibilityhttps://developer.mozilla.org/en-US/docs/Web/Accessibility
HTTPhttps://developer.mozilla.org/en-US/docs/Web/HTTP
URIhttps://developer.mozilla.org/en-US/docs/Web/URI
Web extensionshttps://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
WebAssemblyhttps://developer.mozilla.org/en-US/docs/WebAssembly
WebDriverhttps://developer.mozilla.org/en-US/docs/Web/WebDriver
See all…https://developer.mozilla.org/en-US/docs/Web
Mediahttps://developer.mozilla.org/en-US/docs/Web/Media
Performancehttps://developer.mozilla.org/en-US/docs/Web/Performance
Privacyhttps://developer.mozilla.org/en-US/docs/Web/Privacy
Securityhttps://developer.mozilla.org/en-US/docs/Web/Security
Progressive web appshttps://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
Learn web developmenthttps://developer.mozilla.org/en-US/docs/Learn_web_development
Getting started moduleshttps://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started
Core moduleshttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core
MDN Curriculumhttps://developer.mozilla.org/en-US/curriculum/
Check out the video course from Scrimba, our partnerhttps://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar
Structuring content with HTML modulehttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content
CSS styling basics modulehttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
CSS layout modulehttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout
Dynamic scripting with JavaScript modulehttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting
Playgroundhttps://developer.mozilla.org/en-US/play
HTTP Observatoryhttps://developer.mozilla.org/en-US/observatory
Border-image generatorhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator
Border-radius generatorhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator
Box-shadow generatorhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator
Color format converterhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter
Color mixerhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer
Shape generatorhttps://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator
About MDNhttps://developer.mozilla.org/en-US/about
Advertise with ushttps://developer.mozilla.org/en-US/advertising
Communityhttps://developer.mozilla.org/en-US/community
MDN on GitHubhttps://github.com/mdn
Bloghttps://developer.mozilla.org/en-US/blog/
Webhttps://developer.mozilla.org/en-US/docs/Web
Web APIshttps://developer.mozilla.org/en-US/docs/Web/API
Pointer Lock APIhttps://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
https://github.com/orgs/mdn/discussions/739
https://developer.mozilla.org/de/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/es/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/fr/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/ja/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/ru/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_Lock_API
https://developer.mozilla.org/zh-TW/docs/Web/API/Pointer_Lock_API
Tell us why.https://github.com/web-platform-dx/developer-signals/issues/40
Learn more https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility
See full compatibility https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#browser_compatibility
Basic conceptshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#basic_concepts
Method/properties overviewhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#methodproperties_overview
Handling promise and non-promise versions of requestPointerLock()https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#handling_promise_and_non-promise_versions_of_requestpointerlock
pointerlockchange eventhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#pointerlockchange_event
pointerlockerror eventhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#pointerlockerror_event
Extensions to mouse eventshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#extensions_to_mouse_events
Simple example walkthroughhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#simple_example_walkthrough
IFrame limitationshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#iframe_limitations
Specificationshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#specifications
Browser compatibilityhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#browser_compatibility
See alsohttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#see_also
Basic conceptshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#basic_concepts
pointer capturehttps://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#pointer_capture
Method/properties overviewhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#methodproperties_overview
requestPointerLock()https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#requestpointerlock
Fullscreen APIhttps://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
requestPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas
default unlock gesturehttps://w3c.github.io/pointerlock/#dfn-default-unlock-gesture
engagement gesturehttps://w3c.github.io/pointerlock/#dfn-engagement-gesture
requestPointerLockhttps://w3c.github.io/pointerlock/#dom-element-requestpointerlock
https://w3c.github.io/pointerlock/#extensions-to-the-element-interfacehttps://w3c.github.io/pointerlock/#extensions-to-the-element-interface
Handling promise and non-promise versions of requestPointerLock()https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#handling_promise_and_non-promise_versions_of_requestpointerlock
awaithttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await
pointerLockElement and exitPointerLock()https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#pointerlockelement_and_exitpointerlock
Documenthttps://developer.mozilla.org/en-US/docs/Web/API/Document
pointerLockElementhttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
exitPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock
pointerLockElementhttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
Document.exitPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock
requestPointerLockhttps://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock
pointerlockchangehttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerlockchange_event
pointerlockerrorhttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerlockerror_event
pointerlockchange eventhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#pointerlockchange_event
requestPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock
exitPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock
pointerlockchangehttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerlockchange_event
pointerlockerror eventhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#pointerlockerror_event
requestPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Element/requestPointerLock
exitPointerLock()https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPointerLock
pointerlockerrorhttps://developer.mozilla.org/en-US/docs/Web/API/Document/pointerlockerror_event
Extensions to mouse eventshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#extensions_to_mouse_events
MouseEventhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
movementXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
movementYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
MouseEventhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
screenXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX
screenYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY
mousemovehttps://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
Locked statehttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#locked_state
MouseEventhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
clientXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
clientYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY
screenXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX
screenYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY
movementXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
movementYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
movementXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
movementYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
Unlocked statehttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#unlocked_state
movementXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
movementYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
movementXhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
movementYhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY
Simple example walkthroughhttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#simple_example_walkthrough
pointer lock demohttps://mdn.github.io/dom-examples/pointer-lock/
see source codehttps://github.com/mdn/dom-examples/tree/main/pointer-lock
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas
Handling promise and non-promise versions of requestPointerLock()https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#handling_promise_and_non-promise_versions_of_requestpointerlock
requestAnimationFrame()https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
IFrame limitationshttps://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API#iframe_limitations