Mueva el puntero del mouse a una posición específica usando JavaScript
- Cree una estructura HTML básica con algunos estilos CSS
- Use JavaScript para mover el puntero del mouse a una posición específica
- Conclusión
Tenga en cuenta que no hay forma de mover el puntero del mouse a una posición específica en JavaScript. La razón principal es que puede crear problemas de seguridad para los usuarios y dañar la experiencia del usuario.
En este artículo, crearemos un puntero de mouse falso o personalizado, que puede parecerse al puntero del mouse del sistema predeterminado, y luego moveremos su posición a una posición diferente usando JavaScript. Esta técnica de mover el puntero del mouse a una posición específica tiene fines de demostración y debe evitarse por completo en sitios web listos para producción.
Cree una estructura HTML básica con algunos estilos CSS
Crearemos dos botones en la pantalla (uno a la izquierda y otro a la derecha de la pantalla), y nuestro objetivo será cuando hagamos clic en el primer botón, el puntero del mouse se moverá automáticamente al segundo botón en el pantalla.
Primero, creamos dos elementos HTML dentro de nuestro HTML, una etiqueta img y otro el elemento div. La etiqueta img contendrá la imagen del cursor personalizado o falso que usaremos en lugar del cursor del mouse del sistema original.
Puede usar cualquier imagen del cursor del mouse que desee de Internet. El div tendrá dos botones, "button 1" y "button 2" dentro de él.
También daremos una id a todos estos elementos para que podamos hacer referencia a ellos dentro de JavaScript y diseñarlos dentro de CSS.
Fragmento de código - HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Move mouse pointer</title>
<style>
* {
cursor: none;
}
.block{
display: flex;
justify-content: space-between;
}
img {
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<img id="cursor" src="./mouse_cursor.png" width="16" height="22" />
<div class="block">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
</div>
</body>
</html>
Dentro del CSS, ocultamos el puntero del mouse del sistema original de toda la página con la ayuda de la propiedad CSS cursor: none dentro del asterisco (*), también conocido como el selector universal CSS. Luego agregaremos un flexbox al elemento div para que pueda haber un espacio entre ellos.
En la etiqueta img, nuestro cursor personalizado agregará la propiedad pointer-events: none para que no se le puedan aplicar eventos de puntero. Puede obtener más información sobre pointer-events en MDN, y lo haremos absoluto para que podamos moverlo a cualquier parte de la pantalla.
Use JavaScript para mover el puntero del mouse a una posición específica
Ahora implementemos la funcionalidad para ello usando JavaScript. Primero, tomaremos todos los elementos del cursor, btn1 y btn2, usando el método getElementById() dentro del JavaScript.
Como queremos mover el cursor del mouse a una posición específica, en este caso, en el botón 2, primero tenemos que agarrar las posiciones (izquierda, arriba, ancho, alto) del botón 2 para que cuando hagamos clic en botón 1, el puntero del ratón se moverá automáticamente al botón 2.
Para ello, utilizaremos el método getBoundingClientRect() sobre el btn2, que nos proporcionará un objeto que contiene varias posiciones y dimensiones como izquierda, arriba, abajo, ancho, alto, etc., y almacenaremos este objeto dentro de una variable llamada rect. Luego calcularemos la “posición final X” y la “posición final Y” del “botón 2”, para que podamos llevar el puntero del mouse al centro del “botón 2” al hacer clic en el “botón 1”.
Nuestro puntero de mouse personalizado no se mueve en la pantalla en esta posición. Para que se mueva libremente en el navegador, debemos agregar un detector de eventos al objeto de la ventana.
Este método toma dos parámetros, el primero es el tipo de evento sobre el que queremos ejecutar una función, y el segundo es la función misma que se ejecutará cuando se dispare ese evento.
Como queremos mover el puntero del mouse personalizado, usaremos el evento mousemove como nuestro primer parámetro, y luego dentro de nuestra función de devolución de llamada, tomaremos las coordenadas clientX y clientY, y luego estaremos asignando colóquelo en la posición “izquierda” y “superior” de nuestro puntero de mouse personalizado, como se muestra a continuación.
No olvide agregar "px" al final; de lo contrario, no funcionará.
Fragmento de código - JavaScript:
let cursor = document.getElementById('cursor');
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width / 2;
let finalPositionY = rect.top + rect.height / 2;
// Moving our custom mouse pointer
window.addEventListener('mousemove', (e) => {
x = e.clientX;
y = e.clientY;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
});
btn1.addEventListener('mouseup', (e) => {
cursor.style.left = finalPositionX + 'px';
cursor.style.top = finalPositionY + 'px';
})
En esta etapa, el cursor del ratón personalizado se moverá como el cursor del ratón normal. Ahora moveremos el cursor del mouse personalizado a una posición específica.
Para eso, agregaremos un evento mouseup en btn1 y luego colocaremos los cursores del mouse en las posiciones izquierda y superior con las posiciones finalPositionX y finalPositionY.
Producción:
Conclusión
No hay una forma directa de cambiar la posición del mouse usando JavaScript, ya que tiene algunas desventajas. Pero siempre hay formas diferentes y no oficiales de hacer las cosas en la programación.
Para resolver el problema de mover el puntero del mouse a una posición específica, debemos ocultar el puntero del mouse original. Luego, tenemos que crear nuestro puntero de mouse personalizado y escribir un código JavaScript para que se mueva a una posición específica.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn