在 Chrome 锁定指针后，如果您移动鼠标，MouseEvent.movementX 和 MouseEvent.movementY 有时会返回一个非常大的数字，似乎大约是窗口大小的一半。
这是一个最小的代码示例：
<html>
<body>
<canvas id="canvas" width="100" height="100" style="border: 1px solid">
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function() {
canvas.requestPointerLock();
});
document.addEventListener("mousemove", function() {
if(Math.abs(event.movementX) > 100)
console.log(event.movementX);
});
</script>
</body>
</html>
我的预感是，当您调用 requestPointerLock() 时，它实际上并没有将鼠标锁定在一个位置，而只是将其隐藏。当鼠标离开窗口时，它会将鼠标捕捉回中心，这会导致变量出现大的尖峰。
大尖峰的原因是什么，我该如何解决？
我有以下代码来锁定光标（效果很好）：
var element = document.body;
var controls;
var instructions = document.getElementById( 'start' );
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
if ( havePointerLock ) {
var pointerlockchange = function ( event ) {
if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
controlsEnabled = true;
controls.enabled = true;
} else {
controlsEnabled = false;
controls.enabled = false;
instructions.style.display = '';
}
};
var pointerlockerror = function ( …我有一个TypeScript类,看起来像这样:
class MyClass {
let canvas: any;
constructor(canvas: any) {
this.canvas = canvas;
this.canvas.requestPointerLock = this.canvas.requestPointerLock;
document.exitPointerLock = document.exitPointerLock;
this.canvas.onclick = this._mouseClickHandler.bind(this);
document.addEventListener('pointerlockchange', this._togglePointerLock.bind(this), false);
}
private _mouseClickHandler(event: MouseEvent): void {
this.canvas.requestPointerLock();
}
private _togglePointerLock() {
if (document.pointerLockElement === this.canvas) {
console.info('Locked mouse pointer to canvas.');
document.addEventListener('mousemove', this._handleMouseMovement.bind(this), false);
} else {
console.info('Unlocked mouse pointer from canvas.');
// THIS DOES NOT WORK
document.removeEventListener('mousemove', this._handleMouseMovement.bind(this), false);
}
}
private _handleMouseMovement(event: MouseEvent) {
console.log('Mouse moved to: ', event.movementX, event.movementY);
}
}
基本上,代码应该 …