How to find mouse position relative to the document with jQuery

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>

Result
The coordinates of the mouse pointer relative to the page are:

How to find mouse position relative to the document with jQuery

You May Also Like

How to Get Substring from a String Using jQuery

How to Add <li> in an Existing <ul> with jQuery

How to Loop Through Elements with the Same Class in jQuery

Leave a Reply Cancel reply