Pointer Lock API – это API, который предоставляет прямой доступ к курсору пользователя, ограничивая события мыши (mouse events) определенным элементом и убирая курсор из поля зрения. Этот режим может быть полезен, к примеру, в приложениях связанных с 3d-моделированием.
В данном режиме события курсора обрабатываются даже когда курсор находится за пределами браузера или экрана – в обычном режиме обработка событий ограничена окном браузера. В некотором смысле Pointer Lock API напоминает mouse capture, с той разницей что mouse capture обрабатывает события только при нажатой клавише мыши, не прячет курсор и не обрабатывает события за пределами экрана.
Общий принцип работы
Чтобы инициировать Pointer Lock нужно вызвать метод requestPointerLock() у нужного элемента. На момент написания статьи большинство популярных браузеров (Chrome, Firefox) не спрашивают разрешения, а лишь уведомляют пользователя что курсор захвачен.
У объекта Document есть свойство pointerLockElement, в котором содержится захвативший курсор элемент или null в любом другом состоянии. Для реакции на изменение статуса захвата курсора используется событие pointerlockchange, ощибки можно отслеживать с помощью pointerlockerror.
document.addEventListener('pointerlockchange', lockStatusChange, false);
function lockStatusChange(){
if(document.pointerLockElement === canv){
document.addEventListener("mousemove", updateCirclePosition, false);
}
else{
document.removeEventListener("mousemove", updateCirclePosition, false);
}
}
document.addEventListener('pointerlockerror', lockError, false);
function lockError(e){
console.log(‘pointer lock failed’);
}
Расширения Mouse Events
Pointer Lock API вводит в интерфейс MouseEvent свойства, содержащие изменения (дельты) движения курсора – movementX и movementY. То есть, значения movementX/movementY равны разнице между текущим и предыдущим screenX/screenY. Когда курсор захвачен (locked state) обычные свойства clientX, clientY, screenX и screenY замораживаются, как если бы курсор был неподвижен. В обычном незахваченном состоянии (unlocked state) movementX и movementY также доступны для удобства.
Пример
Пример в codepen доступен по ссылке. Кликните на canvas для захвата курсора.