的Javascript：禁用光标

Question

我想完全禁用光标在浏览器中，类似于http://a-way-to-go.com/和http://voxeljs.com/

当你打开这些项目中，光标已完全被禁用。没有光标，在浏览器内部或外部。我想知道如何做到这一点。

我没有兴趣在cursor: none;

Answer 1

他们似乎使用Pointer Lock API。从MDN：

指针锁（以前称为鼠标锁定）提供了基于鼠标的移动随时间（即，变化量）的输入方法，不仅在视口中的鼠标光标的绝对位置。它使您能够访问原始鼠标移动，将鼠标事件的目标锁定到单个元素，消除了鼠标移动向一个方向走多远的限制，并从视图中移除光标。例如，它非常适合第一人称3D游戏。

更重要的是，API对于任何需要大量鼠标输入来控制移动，旋转对象和更改条目的应用程序非常有用，例如，只需通过移动鼠标即可轻松控制视角，而无需点击任何按钮。这些按钮然后释放其他操作。其他例子包括查看地图或卫星图像的应用程序。

指针锁定允许您访问鼠标事件，即使光标越过浏览器或屏幕的边界。例如，您的用户可以通过移动鼠标而无需旋转或操纵3D模型。没有指针锁，指针到达浏览器或屏幕边缘时，旋转或操作停止。游戏玩家现在可以点击按钮并来回滑动鼠标光标，而无需担心离开游戏区域并不小心点击另一个应用程序，该应用程序会将鼠标焦点从游戏中移开。

有关如何使用它，尤其是跨浏览器的关注，详细信息，可以在该网页上找到，但在短（片段都来自MDN复制）：

请求指针锁定：

canvas.onclick = function() { 
    canvas.requestPointerLock(); 
} 
document.addEventListener('pointerlockchange', lockChangeAlert, false); 

反应以指针锁定状态变化：

function lockChangeAlert() { 
    if(document.pointerLockElement === canvas) { 
    console.log('The pointer lock status is now locked'); 
    document.addEventListener("mousemove", canvasLoop, false); 
    } else { 
    console.log('The pointer lock status is now unlocked'); 
    document.removeEventListener("mousemove", canvasLoop, false); 
    } 
} 

实施例功能，处理鼠标移动事件：

function canvasLoop(e) { 
    var movementX = e.movementX || 
     e.mozMovementX   || 
     e.webkitMovementX  || 
     0; 

    var movementY = e.movementY || 
     e.mozMovementY  || 
     e.webkitMovementY || 
     0; 

    x += movementX; 
    y += movementY; 

    var animation = requestAnimationFrame(canvasLoop); 

    tracker.innerHTML = "X position: " + x + ', Y position: ' + y; 
}