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;
}