247

I am hoping to track the position of the mouse cursor, periodically every t mseconds. So essentially, when a page loads - this tracker should start and for (say) every 100 ms, I should get the new value of posX and posY and print it out in the form.

I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes. Any ideas on how I can get this up and running ?

<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout(mouse_position,100);

}
</script>

</head>

<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
5
  • The problem is that there will be no event object when the function is called for the second time. You probably should listen to some event than use setTimeout. Commented Oct 17, 2011 at 7:47
  • Yes, but shouldn't the mouse_position() function keep calling itself every 100 milliseconds. Shouldn't it actually behave like an infinite recursive function ?
    – Hari
    Commented Oct 17, 2011 at 7:49
  • 2
    possible duplicate of capture mouse position on setInterval() in Javascript Commented Oct 17, 2011 at 7:51
  • 1
    @Titan: Yes, but I suspect that it will error because window.event will be undefined or null. If there is no event, there is no event object. Commented Oct 17, 2011 at 7:51
  • @Hari, you do realize that you're only calling it once? body onload gets called the instant that body is rendered. Make a loop.
    – KaiLando
    Commented Jun 1 at 19:39

19 Answers 19

245

The mouse's position is reported on the event object received by a handler for the mousemove event, which you can attach to the window (the event bubbles):

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var eventDoc, doc, body;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        // Use event.pageX / event.pageY here
    }
})();

(Note that the body of that if will only run on old IE.)

Example of the above in action - it draws dots as you drag your mouse over the page. (Tested on IE8, IE11, Firefox 30, Chrome 38.)

If you really need a timer-based solution, you combine this with some state variables:

(function() {
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
        if (!pos) {
            // We haven't seen any movement yet
        }
        else {
            // Use pos.x and pos.y
        }
    }
})();

As far as I'm aware, you can't get the mouse position without having seen an event, something which this answer to another Stack Overflow question seems to confirm.

Side note: If you're going to do something every 100ms (10 times/second), try to keep the actual processing you do in that function very, very limited. That's a lot of work for the browser, particularly older Microsoft ones. Yes, on modern computers it doesn't seem like much, but there is a lot going on in browsers... So for example, you might keep track of the last position you processed and bail from the handler immediately if the position hasn't changed.

1
  • Now it's as good as safe to use pageX/Y, clientX/Y and screenX/Y. The IE will be soon forgotten, so it's much simpler than this. Commented Jan 18, 2021 at 21:32
139
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}

Open your console (Ctrl+Shift+J), copy-paste the code above and move your mouse on browser window.

4
  • 11
    Imo the best answer
    – HereHere
    Commented Jan 15, 2020 at 17:35
  • 1
    onmousemove = function(e){console.log(`mouse location = X: ${e.x}, Y: ${e.y}`)}
    – Zain
    Commented Aug 10, 2020 at 8:46
  • 1
    Why would you want 20+ lines of code, when it can be acheived with a simple 1-liner? Works perfectly. Commented Sep 9, 2022 at 13:44
  • 3
    onmousemove = (e) => console.log("mouse location:", e.x, e.y)
    – Nightfall
    Commented Sep 27, 2022 at 8:02
74

Here's a solution, based on jQuery and a mouse event listener (which is far better than a regular polling) on the body:

$("body").mousemove(function(e) {
    document.Form1.posx.value = e.pageX;
    document.Form1.posy.value = e.pageY;
})
5
  • As I had mentioned, the regular polling is exactly what I want to do. I am not tracking changes in mouse events, I am only looking to capture the mouse position every x milliseconds (irrespective of whether the mouse moved or not).
    – Hari
    Commented Oct 17, 2011 at 7:53
  • 3
    Why tracking a value that you know for sure didn't change? I don't understand, unless it is a homework problem. With the event method, you can track every change of these values, then do a 100ms polling elsewhere if you need to handle these values for whatever purpose.
    – solendil
    Commented Oct 17, 2011 at 7:57
  • 1
    There's not advantage of using jQuery here except unnecessarily using a 5mb JS lib Commented Apr 5, 2019 at 21:38
  • @PattycakeJr The last time I looked it was under 90kB in the minified version
    – Kris
    Commented May 9, 2019 at 15:33
  • 2
    @PattycakeJr also if you're super unlikely downloading it at all if you point to a CDN since almost every other site links to it Commented Jun 6, 2019 at 22:10
19

What I think that he only wants to know the X/Y positions of cursor than why answer is that complicated.

// Getting 'Info' div in js hands
var info = document.getElementById('info');

// Creating function that will tell the position of cursor
// PageX and PageY will getting position values and show them in P
function tellPos(p){
  info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);
* {
  padding: 0:
  margin: 0;
  /*transition: 0.2s all ease;*/
  }
#info {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  padding: 25px 50px;
}
<!DOCTYPE html>
<html>
  
  <body>
    <div id='info'></div>
        </body>
  </html>

1
  • The simplicity don't have price!!!
    – JRichardsz
    Commented Dec 28, 2021 at 22:59
14

I believe that we are overthinking this,

function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>

3
  • 1
    Im new to this forum, so just so I know, please explain why you -1nd my awnser - this is so I dont make the same mistake again. Thanks! ThePROgrammer
    – dGRAMOP
    Commented Mar 21, 2015 at 15:12
  • 10
    I too get annoyed by downvotes with no explanation. To give you a possible explanation, this answer doesn't address the OP's problem of polling every 100 ms. It is clearer in his response to other answers that this is a necessity.
    – aaaaaa
    Commented Apr 16, 2015 at 9:18
  • 1
    also this sort of inline event handling is deprecated I believe. document.body.addEventListener("mousemove", function (e) {}) is the way to do this, in your javascript code as opposed to in the html
    – Ryan
    Commented Jul 31, 2019 at 21:49
10

Just a simplified version of @T.J. Crowder and @RegarBoy's answers.

Less is more in my opinion.

Check out onmousemove event for more info about the event.

Image mouse tracker

There's a new value of posX and posY every time the mouse moves according to the horizontal and vertical coordinates.

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Example Mouse Tracker</title>
      <style>    
        body {height: 3000px;}
        .dot {width: 2px;height: 2px;background-color: black;position: absolute;}
      </style>
    </head>
    <body>
    <p>Mouse tracker</p>
    <script>
    onmousemove = function(e){
        //Logging purposes
        console.log("mouse location:", e.clientX, e.clientY);

        //meat and potatoes of the snippet
        var pos = e;
        var dot;
        dot = document.createElement('div');
        dot.className = "dot";
        dot.style.left = pos.x + "px";
        dot.style.top = pos.y + "px";
        document.body.appendChild(dot);
    }      
    </script>
    </body>
    </html>

2
  • good job, do you have some tips to make more point when we move mouse fast ? Faster are movement, bigest is the gap between 2 points. Possible to reduce it ?
    – Matrix
    Commented Jul 26, 2021 at 3:46
  • 1
    @Matrix You could probably calculate a straight line between the last and current point and fill that line with points.
    – Jonas
    Commented Jul 27, 2021 at 14:57
9

ES6 based code:

let handleMousemove = (event) => {
  console.log(`mouse position: ${event.x}:${event.y}`);
};

document.addEventListener('mousemove', handleMousemove);

If you need throttling for mousemoving, use this:

let handleMousemove = (event) => {
  console.warn(`${event.x}:${event.y}\n`);
};

let throttle = (func, delay) => {
  let prev = Date.now() - delay;
  return (...args) => {
    let current = Date.now();
    if (current - prev >= delay) {
      prev = current;
      func.apply(null, args);
    }
  }
};

// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));

here is example

9

if anyone still looking for answer then,

function track(e) {
  console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);

paste this code in console to see immediate action

5

If just want to track the mouse movement visually:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
</style>
<body>
<canvas></canvas>

<script type="text/javascript">
var
canvas    = document.querySelector('canvas'),
ctx       = canvas.getContext('2d'),
beginPath = false;

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

document.body.addEventListener('mousemove', function (event) {
	var x = event.clientX, y = event.clientY;

	if (beginPath) {
		ctx.lineTo(x, y);
		ctx.stroke();
	} else {
		ctx.beginPath();
		ctx.moveTo(x, y);
		beginPath = true;
	}
}, false);
</script>
</body>
</html>

4

document.addEventListener('mousemove', (event) => {
  document.getElementById("line").style.top = event.clientY - 10 + 'px';
  document.getElementById("lineY").style.left = event.clientX - 10 + 'px';
  document.getElementById("pos").style.top = (event.clientY - 60) + 'px';
  document.getElementById("pos").style.left = (event.clientX - 60) + 'px';
});
body {
  position: relative;
  height: auto;
  min-height: 100% !important;
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

.abs {
  position: relative;
}

.lineY {
  display: flex;
  position: relative;
  left: 0px;
  background-color: black;
  width: 2px;
  height: 100vh;
  min-height: 100%
}

.line {
  display: flex;
  position: relative;
  background-color: black;
  min-height: 2px;
  width: 100%;
}

.circle {
  display: flex;
  position: absolute;
  left: 0px;
  top: 0px;
}
<div class='line' id="line"></div>
<div class='lineY' id="lineY"></div>
<svg height="100" width="100" id="pos" class="circle">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>

4

Irrespective of the browser, below lines worked for me to fetch correct mouse position.

event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top
2

I don't have enough reputation to post a comment reply, but took TJ Crowder's excellent answer and fully defined the code on a 100ms timer. (He left some details to the imagination.)

Thanks OP for the question, and TJ for the answer! You're both a great help. Code is embedded below as a mirror of isbin.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      height: 3000px;
    }
    .dot {
      width: 2px;
      height: 2px;
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
<script>
(function() {
    "use strict";
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var eventDoc, doc, body;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
		
        if (!pos) {
            // We haven't seen any movement yet, so don't add a duplicate dot 
        }
        else {
            // Use pos.x and pos.y
            // Add a dot to follow the cursor
            var dot;
            dot = document.createElement('div');
            dot.className = "dot";
            dot.style.left = pos.x + "px";
            dot.style.top = pos.y + "px";
            document.body.appendChild(dot);
        }
    }
})();
</script>
</body>
</html>

0
2

Here is a solution

document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}
1

Here is the simplest way to track your mouse position

Html

<body id="mouse-position" ></body>

js

document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
        console.log("mouse move X: ", e.clientX);
        console.log("mouse move X: ", e.screenX);


    }, );

know more

1

This is the shortest way to get the coordinates of mouse pointer. Just put your element where cursor is going to hover, inside $("")

 $("***enter you element here***").mousemove(function(event)
{
 console.clear()
  var x = event.originalEvent.screenX;
  var y = event.originalEvent.screenY;
  console.log("x : "+x)
  console.log("y : "+y)
})
1
[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
    console.table({
        "mouse x": event.clientX,
        "mouse y": event.clientY
    });
}));
0

Here’s a combination of the two requirements: track the mouse position, every 100 milliseconds:

var period = 100,
    tracking;

window.addEventListener("mousemove", function(e) {
    if (!tracking) {
        return;
    }

    console.log("mouse location:", e.clientX, e.clientY)
    schedule();
});

schedule();

function schedule() {
    tracking = false;

    setTimeout(function() {
        tracking = true;
    }, period);
}

This tracks & acts on the mouse position, but only every period milliseconds.

0

We recently had to find the current x,y position to enumerate elements over which the cursor is hovering independent of z-index. We ended up just attaching a mousemove event listener to document e.g.,

function findElements(e) {
  var els = document.elementsFromPoint(e.clientX, e.clientY);

  // do cool stuff with els
  console.log(els);

  return;
}

document.addEventListener("mousemove", findElements);

0

This should work, and it doesn't look nasty either.

class MousePosition {
  constructor(debug = false) {

    /*
      If you set debug to true, it will log the position.
    */
    
    this.d = debug
    this.x = 0;
    this.y = 0;
    this.mouseMoveHandler = this.handleMouseMove.bind(this);
    document.addEventListener('mousemove', this.mouseMoveHandler);
  }

  handleMouseMove(event) {
    this.x = event.clientX;
    this.y = event.clientY;
    if (this.d == true) {
      console.log(this.x, this.y)
    }
  }

  removeListener() {
    document.removeEventListener('mousemove', this.mouseMoveHandler);
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.