JQuery – How to get mouse cursor position
1. After the DOM is ready, we listen for mousemove event.
2. – e.page – show the mouse position relative to the left and top edges of the document (within the iframe). Left top corner of the document is 0px,0px.
The Source Code, mouse position within the whole document:
<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com -->
<!-- This code come with absolutely no warranty -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance -->
<head>
<title>JQuery - How to get mouse cursor position</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){ /* After the DOM is ready, we listen for mousemove event. */
$(document).mousemove(function(e){
/* Write html code inside the element spnCursor - e.page - show the mouse position relative to the left and top edges of the document (within the iframe).*/
/* Left top corner of the document is 0,0 */
$('#CursorPosition').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY);
});
});
</script>
</head>
<body>
<p>JQuery - How to get mouse cursor position</p>
<div id="CursorPosition"></div>
</body>
</html>
DEMO
The Source Code, mouse position within div element – on mouseover:
...
<script language="Javascript">
$('#example2').mousemove(function(e){
var x = e.pageX - this.offsetLeft; // relative mouse position inside div
var y = e.pageY - this.offsetTop; // relative mouse position inside div
$('#example2-xy').html("X: " + x + " Y: " + y);
});
</script>
...
<div id="example2-xy" class="mouse-xy">MOUSE XY</div>
<div id="example2" class="mouse-click">MOUSE CLICK AREA</div>
...
The Source Code, mouse position within div element – on clickr:
...
<script language="Javascript">
$('#example1').click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('#example1-xy').html("X: " + x + " Y: " + y);
});
</script>
...
<div id="example1-xy" class="mouse-xy">MOUSE XY</div>
<div id="example1" class="mouse-click">MOUSE CLICK AREA</div>
...
