I'm observing strange behaviour when attempting to add a mousemove listener to document after requesting a pointer lock.
I've implemented the following, mostly based on documentation from MDN:
var onLockChange = () => {
env.handlers.onLockChange.forEach(lis => { lis(); });
};
document.addEventListener('pointerlockchange', onLockChange, false);
document.addEventListener('mozpointerlockchange', onLockChange, false);
document.addEventListener('pointerlockerror', (e) => {
console.error(e);
}, false);
...
var updatePosition = (e) => {
console.log('EVENT!', e);
};
env.handlers.onLockChange.push(() => {
console.log('INVOKED');
if ( hasPointerLock() ) {
document.addEventListener('mousemove', updatePosition, false);
console.log('Added Listener');
} else {
document.removeEventListener('mousemove', updatePosition, false);
console.log('Removed Listener');
}
})
canvas.onclick = () => {
if ( ! hasPointerLock() ) {
canvas.requestPointerLock();
}
};
I see the console logs exactly as I expect. When I clock on my canvas element, the pointer gets trapped and I see:
INVOKED
Added Listener
but I never see EVENT!.
To make things weirder, if I comment out the call to document.removeEventListener I observe that the mousemove event gets captured but only while locking is off.
