激活木星笔记本中的pointerLock

Question

我目前正在尝试使用指针锁定API到木星笔记本。基本上，我想在不受屏幕尺寸限制的情况下记录大量触控板的移动，然后将其传递给Python，对其进行一些计算。在下面的内容中，我将只讨论如何获得指针锁。

下面是我的方法:在当前笔记本上创建一个新的<div>，这样我就可以使用它锁定指针，让我们称之为canvas，并调用canvas.requestPointerLock();。相当直截了当。

我担心的是，相同的代码(如下所示)将在Javascript测试器中正常工作，但在%%javascript模式下的木星单元中不能工作。

var canvas = document.getElementById('canvasPA');
if (canvas !== null && typeof(canvas) != 'undefined') {
    canvas.parentNode.removeChild(canvas);
}

/*
 *  Checking whether the web page can accommodate pointerLock
 */
var havePointerLock = 'pointerLockElement' in document
        || 'mozPointerLockElement' in document
        || 'webkitPointerLockElement' in document;
if (havePointerLock) {
    console.log("Document has pointer lock capabilities."); // >> True
}

/*
 *  Defining the canvasPA div
 */
if (canvas === null || typeof(canvas) == 'undefined') {
    console.log("New canvas.");
    canvas = document.createElement('div');
    canvas.id = 'canvasPA';
    canvas.style = 'position: absolute; top: 250px; left: 550px; '
            + 'width: 1000px; height: 400px; '
            + 'background-color: #00BB5511; z-index: 1000;';
    document.getElementsByTagName('body')[0].appendChild(canvas);
}

/*
 *  Defining the changePointerLock behavior. 
 *  When the lock is released, all listeners are removed, then canvasPA is 
 *  removed from the webpage.
 */
function changeCallback() {

    var pointerLockElement = document.pointerLockElement 
            || document.mozPointerLockElement 
            || document.webkitPointerLockElement;
    console.log( "pointerLockElement: " + pointerLockElement );

    if(pointerLockElement === canvas) {

        console.log('The pointer lock status is now locked onto canvas');

    } else {
        console.log('The pointer lock status is now unlocked');  

        // Removing all pointerLock-related listeners
        document.removeEventListener('pointerlockchange', changeCallback, false);
        document.removeEventListener('mozpointerlockchange', changeCallback, false);
        document.removeEventListener('webkitpointerlockchange', changeCallback, false);
        document.removeEventListener('pointerlockerror', errorCallback, false);
        document.removeEventListener('mozpointerlockerror', errorCallback, false);
        document.removeEventListener('webkitpointerlockerror', errorCallback, false);

        // Remove canvas from the notebook
        canvas = document.getElementById("canvasPA");
        if (canvas !== null 
                && typeof(canvas) != 'undefined' 
                && canvas.parentNode !== null) {
            canvas.parentNode.removeChild(canvas);
        }
    }
}

function errorCallback() {
    console.log("Error when attempting to lock cursor...");
}

document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
document.addEventListener('pointerlockerror', errorCallback, false);
document.addEventListener('mozpointerlockerror', errorCallback, false);
document.addEventListener('webkitpointerlockerror', errorCallback, false);

// Ask the browser to lock the pointer.
canvas.requestPointerLock = canvas.requestPointerLock 
        || canvas.mozRequestPointerLock 
        || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

使用Javascript测试器，我的控制台打印：

Document has pointer lock capabilities. New canvas. pointerLockElement: [object HTMLDivElement] The pointer lock status is now locked onto canvas

然后光标被锁定并消失。然后按Escape，控制台日志：

pointerLockElement: undefined The pointer lock status is now unlocked

但是，当我在木星单元格中尝试完全相同的代码时，我得到：

Document has pointer lock capabilities. New canvas. Error when attempting to lock cursor...

光标从未被锁定过。

看起来，木星笔记本上的什么东西阻止了我拿到锁，但我无法确定，因为pointerlockerror没有任何解释。有什么想法吗？

我使用的是Chrome (64.0.3282.140)，MacOSX10.11.6。

非常感谢!

• 马蒂耶夫

Answer 1

因此，我成功地利用了前面对一个稍微不同的问题的回答，成功地做到了这一点：

https://stackoverflow.com/a/19901534/9349369

问题是不能自动调用requestPointerLock，应该从用户的回调中调用它

它对我有效，我现在从一个requestPointerLock()回调调用mouseclick。

很高兴我找到了一个解决方案，但是我认为主要的问题仍然存在:为什么它在“正常”的javascript (见原来的问题)中工作，而不是在木星细胞中工作呢？我想现在不那么重要了..。