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

javascript html css

2022-08-30 03:03:20

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

有谁知道这是否可行？我想这可以被认为是一个用户的安全威胁，他们不知道自己在点击什么，所以我不是很乐观......谢谢！

答案 1

使用 CSS：

selector { cursor: none; }

例如：

<div class="nocursor">
   Some stuff
</div>
<style type="text/css">
    .nocursor { cursor:none; }
</style>

要在 Javascript 中的元素上设置此属性，可以使用以下属性：style

<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
    document.getElementById('nocursor').style.cursor = 'none';
</script>

如果你想在整个身体上设置这个：

<script type="text/javascript">
    document.body.style.cursor = 'none';
</script>

但是，请确保您确实要隐藏光标。它真的会惹恼人们。

答案 2

指针锁 API

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

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

document.body.requestPointerLock();

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

document.exitPointerLock();

附加说明

没有光标，真实

这是一个非常强大的 API 调用。它不仅使光标不可见，而且实际上会删除操作系统的本机光标。在释放指针锁之前（在某些浏览器中使用或按下鼠标），您将无法选择文本或使用鼠标执行任何操作（侦听代码中的某些鼠标事件除外）。exitPointerLockESC

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

限制

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

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

此外，除非设置了权限，否则不会从沙盒中工作。requestPointerLockiframeallow-pointer-lock

用户通知

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

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

大多数浏览器只会显示该消息一次，但 Firefox 偶尔会在每次调用时发送垃圾邮件。AFAIK，这只能通过用户设置来解决，请参阅在Firefox中禁用指针锁定通知。

聆听原始鼠标移动

指针锁定 API 不仅删除鼠标，而且将原始鼠标移动数据重定向到调用的元素。这可以通过简单地通过使用事件来侦听，然后访问事件对象上的 and 属性：requestPointerLockmousemovemovementXmovementY

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