Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 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 pointer.

  • 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

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 gives us the object of the element, the image cursor is on. After obtaining the required object, we can invoke the

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


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


    img {
        pointer-events: none;
        /* doing this makes sure .elementFromPoint
        do not acquires the image cursor object */
        position: absolute;
    /* makes the cursor invisible */
    * {
        cursor: none;


    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;; = (px + x) + "px"; = (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
   = (px + x) + "px";
   = (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;

Output: Click here to check the live output

My Personal Notes arrow_drop_up
Last Updated : 27 Apr, 2023
Like Article
Save Article
Similar Reads
Related Tutorials