yey*_*man 121 html javascript css
我想在显示一个旨在在建筑大厅中显示信息的网页时隐藏光标.它根本不必是交互式的.我尝试使用cursor属性和透明光标图像,但我没有使它工作.
有人知道这是否可以做到？我想这可以被认为是一个用户的安全威胁,无法知道他在哪里点击,所以我不是很乐观......谢谢!
Luc*_*nes 189
使用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>
但是,请确保您确实要隐藏光标.它真的会让人烦恼.
Joh*_*isz 23
虽然cursor: noneCSS解决方案绝对是一个简单易用的解决方法,但如果您的实际目标是在使用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否则无法使用沙盒.iframeallow-pointer-lock
用户通知
有些浏览器会在锁定开始之前提示用户进行确认,有些浏览器会显示一条消息.这意味着在调用之后,指针锁可能不会立即激活.但是,通过监听调用pointerchange的元素上的事件,可以监听指针锁定的实际激活requestPointerLock:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
大多数浏览器只会显示一次消息,但Firefox偶尔会在每次调用时发送消息.AFAIK,这只能通过用户设置来解决,请参阅在Firefox中禁用指针锁定通知.
听原始鼠标移动
Pointer Lock API不仅会删除鼠标,而是将原始鼠标移动数据重定向到requestPointerLock调用的元素.只需使用该mousemove事件,然后访问事件对象的movementX和movementY属性即可收听此信息:
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
gas*_*par 10
如果你想隐藏整个网页中的光标，body除非它覆盖了整个可见页面，否则使用将不起作用，但情况并非总是如此。要确保光标在页面中的任何位置都隐藏，请使用：
document.documentElement.style.cursor = 'none';
要重新启用它：
document.documentElement.style.cursor = 'auto';
静态CSS表示法的类似物是html {cursor:none}（或者，取决于你到底想要什么* {cursor:none}/:root {cursor:none}）。