Te sugerimos que pruebes esta solución en un entorno controlado antes de enviarlo a producción, un saludo.
Solución:
Con CSS:
selector cursor: none;
Un ejemplo:
Some stuff
Para configurar esto en un elemento en Javascript, puede usar el style propiedad:
Si desea configurar esto en todo el cuerpo:
Sin embargo, asegúrese de que realmente desea ocultar el cursor. Puede De Verdad molestar a la gente.
API de bloqueo de puntero
Mientras que la cursor: none La solución CSS es definitivamente una solución sólida y fácil solución alternasi su objetivo real es retirar el cursor predeterminado mientras se utiliza su aplicación web, o implementar su propio interpretación del movimiento del mouse sin procesar (para juegos FPS, por ejemplo), es posible que desee considerar usar la API Pointer Lock en su lugar.
Puede usar requestPointerLock en un elemento para eliminar el cursor y redirigir todo mousemove eventos a ese elemento (que puede manejar o no):
document.body.requestPointerLock();
Para liberar el bloqueo, puede usar exitPointerLock:
document.exitPointerLock();
Notas adicionales
Sin cursor, de verdad
Esta es una llamada API muy poderosa. No solo hace que el cursor sea invisible, sino que en realidad elimina el cursor nativo de su sistema operativo. No podrá seleccionar texto ni hacer cualquier cosa con su mouse (excepto escuchando algunos eventos de mouse en su código) hasta que se libere el bloqueo del puntero (ya sea usando exitPointerLock o presionando ESC en algunos navegadores).
Es decir, no puede salir de la ventana con el cursor para que se vuelva a mostrar, ya que no hay cursor.
Restricciones
Como se mencionó anteriormente, esta es una llamada API muy poderosa y, por lo tanto, solo se permite realizarla en respuesta a alguna interacción directa del usuario en la web, como un clic; por ejemplo:
document.addEventListener("click", function ()
document.body.requestPointerLock();
);
También, requestPointerLock no funcionará desde un espacio aislado iframe a menos que el allow-pointer-lock se establece el permiso.
Notificaciones de usuario
Algunos navegadores solicitarán al usuario una confirmación antes de activar el bloqueo, algunos simplemente mostrarán un mensaje. Esto significa que es posible que el bloqueo del puntero no se active inmediatamente después de la llamada. Sin embargo, la activación real del bloqueo del puntero se puede escuchar escuchando el pointerchange evento en el elemento en el que requestPointerLock fue llamado:
document.body.addEventListener("pointerlockchange", function ()
if (document.pointerLockElement === document.body)
// Pointer is now locked to .
);
La mayoría de los navegadores solo mostrarán el mensaje una vez, pero Firefox ocasionalmente enviará spam en cada llamada. AFAIK, esto solo puede solucionarse mediante la configuración del usuario, consulte Desactivar notificación de bloqueo de puntero en Firefox.
Escuchar el movimiento del ratón en bruto
La API Pointer Lock no solo elimina el mouse, sino que redirige los datos de movimiento del mouse sin procesar al elemento. requestPointerLock fue llamado. Esto se puede escuchar simplemente usando el mousemove evento, luego accediendo al movementX y movementY propiedades en el objeto de evento:
document.body.addEventListener("mousemove", function (e)
console.log("Moved by " + e.movementX + ", " + e.movementY);
);
Eres capaz de animar nuestra función escribiendo un comentario o valorándolo te damos la bienvenida.