Javascript requestPointerLock（）在Vue.js组件内不工作

我试图在Vue.js组件中使用

requestPointerLock（）

。如果我的组件的

指针shouldlock

数据项为

true

，则指针应在

beforeUpdate（）生命周期挂钩期间锁定。我的代码如下所示：

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

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

requestPointerLock（）
函数如下所示：

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

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

此技术适用于React或vanilla JS，但在使用Vue.JS时，指针不会被锁定。相反，会触发
pointerlockerror
事件

我也尝试过使用
updated（）
lifecycle挂钩，但这也不起作用

有人知道为什么无法从Vue.js组件内部成功请求指针锁吗？
根据规范，
requestPointerLock（）
只能由有效的接合手势（例如单击事件）触发。不可能在没有用户交互的情况下以编程方式请求指针锁。有关更多信息，请参阅。
这真是不幸，评论员让您删除答案。。。你的编辑就是答案，下面是答案。我投票取消删除你的答案，但你可能应该重新发布一个新的答案，避免使用诸如“更新”之类的禁忌词，因为这不是一个更新，而是一个真实的答案（而且是正确的答案）。也可以随意引用规范中的引文。