Find Screen Coordinates of Mouse using jQuery
Author :
Virendra Dugar
Blog :jQuery By Example
Date: 7/24/2012 5:30:00 AM
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)
Feel free to contact me for any help related to jQuery, I will gladly help you.