En este artículo, aprenderemos cómo mover el puntero del mouse a cualquier posición específica en el navegador web usando JavaScript. Antes de comenzar, debe saber que en realidad no es posible mover el puntero del mouse a una posición usando Javascript, dicha funcionalidad puede ser mal utilizada fácilmente, pero podemos simular algo similar.
En este artículo, aprenderemos a mover el puntero del mouse de un puntero a otro.
- Dado que no podemos hacer un puntero de mouse real usando JavaScript, usamos una imagen como cursor.
- Supongamos variables x, y, px, py, x1, x2
x: x-position of the actual mouse pointer y: y-position of the actual mouse pointer x1: x-position where we want the mouse to appear x2: y-position where we want the mouse to appear Now, let x + px = x1 px = x1 - x similarly, py = y1 - y Now, px, py is the relative position of x, y with respect to x1, y1. The position where our image cursor will appear with respect to x1, y1 will be given by x + px and y + py for all x, y
- Ahora, el problema es cómo detectar un clic ya que el cursor del mouse puede no estar en el puntero. Para hacer esto, usamos document.elementFromPoint(x+px, y+py) en el que pasamos la posición del cursor de la imagen. Esto nos dará el objeto del elemento, el cursor de la imagen está encendido. Después de obtener el objeto requerido, podemos invocar object.click().
Ejemplo:
- Código HTML:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/></head><body><imgid="cursor"src=width="15"height="20"/><p><buttonid="b1">BUTTON1</button></p><p><buttonid="b2">BUTTON2</button></p></body></html> - Código CSS:
<style>img {pointer-events: none;/* doing this makes sure .elementFromPointdo not acquires the image cursor object */position: absolute;}/* makes the cursor invisible */* {cursor: none;}</style> - Código JavaScript:
<script>varx, y;varpx, py;px = py = 0;// Image of cursorvarcursor = document.getElementById("cursor");// Button 1varb1 = document.getElementById("b1");// Button 2varb2 = document.getElementById("b2");/* mutex is used to avoid multiple click event fromfiring at the same time due to different positionof image cursor and actual cursorUsing mutex avoid any conflicts if original cursor andimage cursor are both on a clickable elementThis makes sure only 1 click event is triggered at a time*/varmutex =false;/*The following event is selecting the elementon the image cursor and fires click() on it.The following event is triggered only when mouse is pressed.*/window.addEventListener("mouseup",function(e) {// gets the object on image cursor positionvartmp = document.elementFromPoint(x + px, y + py);mutex =true;tmp.click();cursor.style.left = (px + x) +"px";cursor.style.top = (py + y) +"px";})/* The following event listener moves the image pointerwith respect to the actual mouse cursorThe function is triggered every time mouse is moved */window.addEventListener("mousemove",function(e) {// Gets the x,y position of the mouse cursorx = e.clientX;y = e.clientY;// sets the image cursor to new relative positioncursor.style.left = (px + x) +"px";cursor.style.top = (py + y) +"px";});/* The following function re-calculates px,pywith respect to new positionClicking on b1 moves the pointer to b2Clicking on b2 moves the pointer to b1 */b1.onclick =function() {if(mutex) {mutex =false;px = b2.offsetLeft - x;py = b2.offsetTop - y;}}b2.onclick =function() {if(mutex) {mutex =false;px = b1.offsetLeft - x;py = b1.offsetTop - y;}}</script>
Solución final: en esta sección combinaremos todas las secciones anteriores en una sola y realizaremos la tarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
img {
pointer-events: none;
/* doing this makes sure .elementFromPoint
do not acquires the image cursor object */
position: absolute;
}
/* makes the cursor invisible */
* {
cursor: none;
}
</style>
</head>
<body>
<img id="cursor" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200319212118/cursor2.png"
width="15" height="20" />
<p>
<button id="b1">BUTTON1</button>
</p>
<p>
<button id="b2">BUTTON2</button>
</p>
<script>
var x, y;
var px, py;
px = py = 0;
// Image of cursor
var cursor = document.getElementById("cursor");
// Button 1
var b1 = document.getElementById("b1");
// Button 2
var b2 = document.getElementById("b2");
/* mutex is used to avoid multiple click event from
firing at the same time due to different position
of image cursor and actual cursor
Using mutex avoid any conflicts if original cursor and
image cursor are both on a clickable element
This makes sure only 1 click event is triggered at a time*/
var mutex = false;
/*
The following event is selecting the element
on the image cursor and fires click() on it.
The following event is triggered only when mouse is pressed.
*/
window.addEventListener("mouseup", function(e) {
// gets the object on image cursor position
var tmp = document.elementFromPoint(x + px, y + py);
mutex = true;
tmp.click();
cursor.style.left = (px + x) + "px";
cursor.style.top = (py + y) + "px";
})
/* The following event listener moves the image pointer
with respect to the actual mouse cursor
The function is triggered every time mouse is moved */
window.addEventListener("mousemove", function(e) {
// Gets the x,y position of the mouse cursor
x = e.clientX;
y = e.clientY;
// sets the image cursor to new relative position
cursor.style.left = (px + x) + "px";
cursor.style.top = (py + y) + "px";
});
/* The following function re-calculates px,py
with respect to new position
Clicking on b1 moves the pointer to b2
Clicking on b2 moves the pointer to b1 */
b1.onclick = function() {
if (mutex) {
mutex = false;
px = b2.offsetLeft - x;
py = b2.offsetTop - y;
}
}
b2.onclick = function() {
if (mutex) {
mutex = false;
px = b1.offsetLeft - x;
py = b1.offsetTop - y;
}
}
</script>
</body>
</html>
Producción: