requestPointerLock()이 Vue.js 구성 요소 내부에서 작동하지 않습니다.

Question

requestPointerLock()을 Vue.js 구성 요소 안에 사용하려고합니다. 구성 요소의 pointerShouldLock 데이터 항목이 true 인 경우 포인터는 beforeUpdate() 수명주기 후크 중에 잠겨 야합니다. 내 코드는 다음과 같습니다

beforeUpdate() { 
    if (this.pointerShouldLock) { 
     const gameScreen = document.getElementById('game-screen') 
     requestPointerLock(gameScreen) 
    } 
} 

requestPointerLock() 기능은 다음과 같습니다 Vue.js를 사용하는 경우

이

requestPointerLock = element => { 
    element.requestPointerLock = 
     element.requestPointerLock || element.mozRequestPointerLock   
    element.requestPointerLock() 
} 

이 기술은 반응하거나 바닐라 JS으로 잘 작동하지만, 포인터가 고정되지 않습니다 . 대신 pointerlockerror 이벤트가 발생합니다.

나는 또한 updated() 라이프 사이클 후크를 사용해 보았지만 이것도 작동하지 않습니다.

Vue.js 구성 요소 내부에서 포인터 잠금을 성공적으로 요청할 수없는 이유는 누구나 알 수 있습니까?

Answer 1

사양에 따르면 requestPointerLock()은 유효한 참여 동작 (예 : 클릭 이벤트)에 의해서만 트리거 될 수 있습니다. 사용자 상호 작용없이 프로그래밍 방식으로 포인터 잠금을 요청할 수 없습니다. 자세한 내용은 specs을 참조하십시오.