How to find mouse position relative to the document with jQuery

January 4, 2021 admin

In this tutorial, we are going to see how to find mouse position relative to the document with jQuery. The event.pageX property can be used to find horizontal coordinates, while event.pageY can be used to find vertical coordinates. Here is an example:

How to find mouse position relative to the document with jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to find mouse position relative to the document</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("body").mousemove(function(event){
					$(".cordn").text("(" + event.pageX + "," + event.pageY + ")");
				});
			});
		</script>
	</head>
	<body>
		<p>The coordinates of the mouse pointer relative to the page are: <b class="cordn"></b></p>
	</body>
</html>