How to move mouse pointer to a specific position using JavaScript ?

Last Updated : 18 Apr, 2025

In this article, we will learn how to move the mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it’s not actually possible to move the mouse pointer to a position using JavaScript, such functionality can be easily misused, but we can simulate something similar. In this article, we will learn to move the mouse pointer from one pointer to another.

Since we cannot make an actual mouse pointer using JavaScript, we use an image as a cursor.
Suppose 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

Now, the problem is how to detect clicks since the mouse cursor may not be on the pointer. To do this, we use document.elementFromPoint(x+px, y+py) in which we pass the position of the image cursor. This will give us the object of the element, the image cursor is on. After obtaining the required object, we can invoke the object.click().

Example: This example shows the movement of the mouse pointer to a specific position using JavaScript

html

<html>
<head>
    <style>
        img {
    pointer-events: none;
    position: absolute;
}
* {
    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> 
    let x, y;
let px, py;
px = py = 0;
// Image of cursor
let cursor = document.getElementById("cursor");
let b1 = document.getElementById("b1");
let b2 = document.getElementById("b2");
let mutex = false;
window.addEventListener("mouseup", function (e) {

    // gets the object on image cursor position
    let tmp = document.elementFromPoint(x + px, y + py);
    mutex = true;
    tmp.click();
    cursor.style.left = (px + x) + "px";
    cursor.style.top = (py + y) + "px";
})
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";

});
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>

Output:

How to make a Round Slider using JavaScript ?

Archaic

Improve

Article Tags :

How to move mouse pointer to a specific position using JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?