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

30 Nov, 2021
In this article, we will learn how to move a 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 we easily misused but we can simulate something similar.
In this article, we will learn to move the mouse pointer from one pointer to another pointer.
Since we cannot make actual mouse pointer using JavaScript, we use an image as a cursor.
Suppose variables x, y, px, py, x1, x2x: 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
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 click 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 image cursor. This will gives us the object of the element, the image cursor is on. After obtaining the required object, we can invoke the object.click().
Example:
HTML Code:<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" /></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>    </body>  </html>                    
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" /></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>    </body>  </html>                    
CSS Code:<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>
<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>
JavaScript Code:<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>
<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>
Final Solution: In this section we will combine all the above section into one and perform the task.
<!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>
Output:
as5853535
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?