Fashionably late entrance, thanks for sticking around! So, a mouse cursor and a chicken drumstick walk into a bar...wait wait wait, that's not right. Wrong show.

Did you know your mouse has a lot more to offer than being "just" a cursor? Think about FPS games, and you'll know what we mean. Until recently, we could not really properly take advantage of the mouse in that way, but with the new Pointer Lock API we can.

Start the show!

These examples will only work in Chrome and Firefox.

How does it work?

To activate PointerLock on an element. you call element.requestPointerLock(). The pointerlockchange event will be triggered on the document element, if the pointer gets locked. If it fails the pointerlockerror will be triggered.

Once we've got the pointer locked, the cursor will disappear. As we want to do stuff with the actual mouse movement, we attach a mousemove eventlisterener to the document element. The screenX, screenY, clientX, and clientY components of the mousemove event will all be constants now, as there is no more pointer to move around a defined grid. Instead we get the movementX and movementY values which are deltas of the X and Y movement of your mouse. Note: these values are not constrained by anything, this means that the mouse movement isn't constrained by the browser window. Depending on mouse acceleration curve of the system, the deltas are bigger when you move your mouse faster

Useful?

If you're building games or other 3D-stuff that requires different mouse handling, this is a must have. The examples above are just some of the things you can do with this. But in general, if you'd wanted to build a game like Quake, you couldn't have done it without the Pointer Lock API.

Great, but can I use it today?

The Pointer Lock API is currently only supported in Chrome and Firefox. In Firefox it only works in fullscreen mode. It also somehow crashes Firefox Aurora when requesting fullscreen mode. So we're quite some time away from actually using it (safely).

What's behind the curtain?

Feel free to snoop around the different source files we used for this example.

• The javascripts
• The stylesheet