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

Question

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

javascripthtmlcss

164

我希望在展示楼堂馆所信息的网页中隐藏光标。这个页面不需要任何交互。我尝试了更改光标属性和使用透明光标图像，但都没有解决我的问题。

有人知道这是否可行吗？我认为对于一个不知道自己点击什么的用户来说，这可能被视为安全威胁，所以我不是很乐观...谢谢！

- yeyeyerman

6个回答

47

Pointer Lock 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();
});

此外，在受沙盒限制的iframe中使用requestPointerLock需要设置allow-pointer-lock权限。

用户通知

一些浏览器在锁定光标前会提示用户确认，而一些则只会显示消息。这意味着调用后指针锁可能不会立即激活。但是，可以监听在调用requestPointerLock的元素上的pointerchange事件以了解指针锁的实际激活情况：

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

大多数浏览器只会在第一次调用时显示该消息，但Firefox偶尔会在每次调用时都发送该消息。据我所知，唯一的解决方法是通过用户设置进行调整，请参见禁用Firefox中的指针锁定通知。

监听原始鼠标移动

指针锁定API不仅会移除鼠标，而且还会将原始鼠标移动数据重定向到调用requestPointerLock的元素上。只需使用mousemove事件，然后访问事件对象上的movementX和movementY属性即可简单地监听它们：

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

- John Weisz

1

谢谢您。我发现这是在单页应用程序中切换到全屏幻灯片放映时唯一可靠的消除光标的方法。 - Velojet

9

如果要在整个网页中隐藏鼠标指针，使用 body 并不能奏效，除非它覆盖了整个可见页面，而这并不总是情况。为确保鼠标指针在整个页面中都得到隐藏，可以使用以下代码：

document.documentElement.style.cursor = 'none';

重新启用它的方法如下：

document.documentElement.style.cursor = 'auto';

静态CSS表示法的类比是 html {cursor:none}（或者，根据您需要的确切内容*{cursor:none} / :root{cursor:none}）。

- gaspar

2

我用透明的*.cur 1px到1px来做，但它看起来像小点。 :( 我认为这是我能做的最好的跨浏览器的事情。 CSS2.1没有“cursor”属性的“none”值 - 它是在CSS3中添加的。这就是为什么它不是到处都可行。

- zaycker

4

请使用1%透明度的.png/.cur代替。 - Derek 朕會功夫

1

如果你想在CSS中实现这个功能：

#ID { cursor: none !important; }

- user5746931

8

通常应避免使用!important。 - Luca Steeb

1

尝试使用以下代码获取整个HTML文档：

html * {cursor:none}

如果有一些 CSS 覆盖了你的鼠标样式：none，请使用 !important。

html * {cursor:none!important}

- Pavel Salaquarda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucas Jones · Accepted Answer

使用 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>

但确保你真的想隐藏光标。它可能会真的让人恼火。