Pointer Lock API

Question

我希望在显示用于在建筑大厅中显示信息的网页时隐藏光标。它根本不必是交互式的。我尝试使用cursor属性和透明光标图像，但我没有使它工作。

有人知道是否可以这样做吗？我认为这可以被认为是对于无法知道他点击的用户的安全威胁，所以我不是很乐观......谢谢！

Answer 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>

确保您确实要隐藏光标。它可以真的惹恼了人们。

Answer 2

Pointer Lock API

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

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

document.body.requestPointerLock();

要解除锁定，您可以使用exitPointerLock：

document.exitPointerLock();

附加说明

无光标，真实

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

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

<强>限制

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

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

此外，requestPointerLock无法使用沙盒iframe，除非设置了allow-pointer-lock权限。

用户的通知

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

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

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

聆听原始鼠标移动

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

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

Answer 3

其他答案在行动

＆＃13;

MATCH (x)-[firstIssue:FIRST_NODE]->(y:Type1)
MATCH (z)-[:NEXT_NODE*1..{firstIssue.Count}]->(a:Type1)
RETURN x,y,z,a

＆＃13;

.nocursor {
  cursor: none;
  
  padding: 2em;
  border: 1px solid #000;
}

＆＃13;

Answer 4

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

Answer 5

如果你想在CSS中这样做：

#ID { cursor: none !important; }

Answer 6

对于整个HTML文档试试这个

html * {cursor:none}

或者如果某些css覆盖了你的光标：没有使用！important

html * {cursor:none!important}

Answer 7

如果要在整个网页中隐藏光标，除非覆盖整个可见页面，否则使用body将不起作用。要确保光标隐藏在页面中的所有位置，请使用：

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

要重新启用它：

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

Pavel Salaquarda （实质上是html * {cursor:none}）在答案中带有静态CSS标记的类似物

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

7 个答案:

Pointer Lock API

附加说明