是否可以使用 CSS 或 Javascript 隐藏网页中的光标？

我想在显示用于在大楼大厅中显示信息的网页时隐藏光标。它根本不必是交互式的。我尝试更改光标属性并使用透明光标图像，但它并没有解决我的问题。

有人知道这是否可以做到吗？我想这可以被认为是一个不知道他在点击什么的用户的安全威胁，所以我不是很乐观……谢谢！

原文由 yeyeyerman 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 642

指针锁定 API

虽然 cursor: none CSS 解决方案绝对是可靠且简单的 _解决方法_，但如果您的实际目标是在使用 Web 应用程序时删除默认光标，或者实现您自己对原始鼠标移动的解释（对于 FPS 游戏），例如），您可能需要考虑改用 Pointer Lock API 。

您可以在元素上使用 requestPointerLock 来删除光标，并将所有 mousemove 事件重定向到该元素（您可能会处理也可能不会处理）：

 document.body.requestPointerLock();

要释放锁，您可以使用 exitPointerLock ：

 document.exitPointerLock();

补充笔记

没有光标，真的

这是一个非常强大的 API 调用。它不仅使您的光标不可见，而且 _实际上删除了操作系统的本机光标_。在释放指针锁定（通过使用 exitPointerLock 或在某些浏览器中按 ESC ).

也就是说，您不能让光标离开窗口以使其再次显示，因为没有光标。

限制

如上所述，这是一个非常强大的 API 调用，因此只允许响应网络上的某些直接用户交互，例如点击；例如：

 document.addEventListener("click", function () {
    document.body.requestPointerLock();
});

此外，除非设置了 allow-pointer-lock 权限，否则 requestPointerLock 将无法在沙盒中 iframe --- 。

用户通知

有些浏览器会在锁定之前提示用户进行确认，有些浏览器只会显示一条消息。这意味着指针锁定可能不会在调用后立即激活。但是，指针锁定的实际激活可以通过侦听调用 --- 的元素上的 requestPointerLock pointerchange 事件来侦听：

 document.body.addEventListener("pointerlockchange", function () {
    if (document.pointerLockElement === document.body) {
        // Pointer is now locked to <body>.
    }
});

大多数浏览器只会显示一次消息，但 Firefox 偶尔会在每次调用时发送垃圾消息。 AFAIK，这只能通过用户设置来解决，请参阅 Disable pointer-lock notification in Firefox 。

聆听原始鼠标移动

Pointer Lock API 不仅移除了鼠标，而且将原始鼠标移动数据重定向到元素 requestPointerLock 被调用。这可以简单地通过使用 mousemove 事件，然后访问 movementX 和 movementY 对象上的属性来收听：

 document.body.addEventListener("mousemove", function (e) {
    console.log("Moved by " + e.movementX + ", " + e.movementY);
});

原文由 John Weisz 发布，翻译遵循 CC BY-SA 3.0 许可协议

是否可以使用 CSS 或 Javascript 隐藏网页中的光标？

指针锁定 API

补充笔记

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

Stack Overflow 翻译