Find Screen Coordinates of Mouse using jQuery

In this post, you will see how to find the screen coordinates of the location where mouse button is pressed or suppose there is an image on your web page and you want to display the screen coordinates of the location where the mouse button is pressed on the image.

To find out screen coordinates, we can use event object's 2 properties.

ScreenX: The screenX event attribute returns the horizontal coordinate (according to the users computer screen) of the mouse pointer when an event was triggered.

ScreenY: The screenY event attribute returns the vertical coordinate (according to the users computer screen) of the mouse pointer when an event was triggered.

$(document).ready(function() {
   $('img').mousedown(function(e) {
      var sMsg = '<u>Coordinates:</u><br/>';
      $('p').html(sMsg + 'Horizontal: ' + e.screenX + ', Vertical: ' + e.screenY);
   });
});​
See result below.(Click on image)


See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..