How to move mouse pointer to a specific position using JavaScript ? Last Updated : 18 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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, x2x: x-position of the actual mouse pointery: y-position of the actual mouse pointerx1: x-position where we want the mouse to appearx2: y-position where we want the mouse to appearNow, letx + px = x1px = x1 - xsimilarly,py = y1 - yNow, 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 + pyfor all x, yNow, 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: Comment More infoAdvertise with us Next Article How to move mouse pointer to a specific position using JavaScript ? A Archaic Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Determine which Element the Mouse Pointer Move Over using JavaScript? Given an HTML document and the task is to get the element where the mouse pointer moves over. Below are the approaches to Determining which Element the Mouse Pointer moves over using JavaScript: Table of ContentUsing clientX and clientY propertiesUsing onmouseover propertyApproach 1: Using clientX a 2 min read How to get the Position of mouse pointer in jQuery ? In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event 1 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to Get Selected Index on Mouseover in JavaScript ? To obtain the selected index on mouseover in JavaScript, attach event listeners to the parent container and utilize iteration through child elements to discover the index of the hovered element. By tracking the index of the hovered element during this process, you can determine the selected index ac 2 min read How to Change Background Color of a Div on Mouse Move Over using JavaScript ? The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() methods to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect 2 min read Like