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

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, 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 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
    </head>
      
    <body>
        <img id="cursor" src=
            width="15" height="20" />
      
        <p>
            <button id="b1">BUTTON1</button>
        </p>
      
        <p>
            <button id="b2">BUTTON2</button>
        </p>
      
      
    </body>
      
    </html>                    

    chevron_right

    
    

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        img {
            pointer-events: none;
            /* doing this makes sure .elementFromPoint 
            do not accquires theimage cursor object */
            position: absolute;
        }
        /* makes the cursor invisible */
              
        * {
            cursor: none;
        }
    </style>

    chevron_right

    
    

  • JavaScript Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

Final Solution: In this section we will combine all the above section into one and perform the task.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        img {
            pointer-events: none;
            /* doing this makes sure .elementFromPoint 
               do not accquires theimage cursor object */
            position: absolute;
        }
        /* makes the cursor invisible */
          
        * {
            cursor: none;
        }
    </style>
</head>
  
<body>
    <img id="cursor" src=
         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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Hi I am a college student I am interested in teaching and competitive coding I write blogs in my free time on Computer Science subjects Check my blog https//slaystudycom/

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.