92

I have a little div tag that when I click on it (onClick event), it will run the printMousePos() function.

These are the HTML tags:

<html>
    <header>
        <!-- By the way, this is not the actual html file, just a generic example. -->
        <script src='game.js'></script>
    </header>
    <body>
        <div id="example">
            <p id="test">x: , y:</p>
        </div>
    </body>
</html>

This is the printMousePos function in a seperate .js file:

function printMousePos() {
    var cursorX;
    var cursorY;
    document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
}
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}

Yes, the function actually works (it knows when you click it and all), but it returns undefined for both x and y, so I'm assuming that the getting x and y logic in the function is incorrect. Any Ideas? I also know there aren't any built-in functions within javascript itself to return the x and y like in java, ex. would there be a way to do it with say JQuery or PHP? (avoid those if possible though, javascript would be best). Thanks!

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41
Bryce Hahn
  • 1,585
  • 4
  • 16
  • 26
  • 3
    `event.clientX` and `event.clientY` – Jonathan May 19 '14 at 18:23
  • @Jonathan I tried that, still returns undefined though. – Bryce Hahn May 19 '14 at 18:25
  • 1
    CursorX and cursorY are undefined before the mouse move event is triggered. If you want the position from the click event pass event to the printMousePos function – Mathias May 19 '14 at 18:29
  • 2
    Using **event.clientX and **event.clientY** provides the coordinates relative to the element taking into account margin, padding and border measures. To get the right coordinates, use **event.offsetX** and **event.offsetY**. – jordiburgos Aug 02 '19 at 16:55

4 Answers4

136

Like this.

function printMousePos(event) {
  document.body.textContent =
    "clientX: " + event.clientX +
    " - clientY: " + event.clientY;
}

document.addEventListener("click", printMousePos);

MouseEvent - MDN

MouseEvent.clientX Read only
The X coordinate of the mouse pointer in local (DOM content) coordinates.

MouseEvent.clientY Read only
The Y coordinate of the mouse pointer in local (DOM content) coordinates.

Jonathan
  • 8,771
  • 4
  • 41
  • 78
17

It sounds like your printMousePos function should:

  1. Get the X and Y coordinates of the mouse
  2. Add those values to the HTML

Currently, it does these things:

  1. Creates (undefined) variables for the X and Y coordinates of the mouse
  2. Attaches a function to the "mousemove" event (which will set those variables to the mouse coordinates when triggered by a mouse move)
  3. Adds the current values of your variables to the HTML

See the problem?

Your variables are never getting set, because as soon as you add your function to the "mousemove" event you print them.

It seems like you probably don't need that mousemove event at all; I would try something like this:

function printMousePos(e) {
    var cursorX = e.pageX;
    var cursorY = e.pageY;
    document.getElementById('test').innerHTML = "x: " + cursorX + ", y: " + cursorY;
}
Gass
  • 7,536
  • 3
  • 37
  • 41
Kylok
  • 767
  • 6
  • 15
3

simple solution is this:

game.js:

document.addEventListener('click', printMousePos, true);
function printMousePos(e){
  
      let cursorX = e.pageX;
      let cursorY= e.pageY;
      $( "#test" ).text( "pageX: " + cursorX +",pageY: " + cursorY );
}
user889030
  • 4,353
  • 3
  • 48
  • 51
Tea
  • 31
  • 1
0

window.addEventListener("click", (event) => {
  console.log(event.offsetX, event.offsetY);
});
7m45h
  • 9
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 11 '23 at 09:35