event.pageX
and event.pageY
The jQuery event.pageX
can be used to find the mouse position relative to the left edge of the document, whereas the event.pageY
can be used to find the mouse position relative to the top edge of the document. Let's check out an example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Find Coordinates of Mouse Pointer</title>
<style>
*{
margin: 0;
}
html, body{
height:100%;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("body").mousemove(function(event){
var relPageCoords = "(" + event.pageX + "," + event.pageY + ")";
$(".mouse-cords").text(relPageCoords);
});
});
</script>
</head>
<body>
<p>Coordinates of mouse pointer with respect to the page are: <strong class="mouse-cords"></strong></p>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to call a function repeatedly after fixed time interval in jQuery
Use the JavaScript setInterval() method...How to remove white space from the beginning of a string in PHP
Use the PHP ltrim() function...Django - How to Create Custom Login Page
Within this article we will look at how...How to Crop Image before Upload using Cropper Js in Laravel 7.x
Hi Guys, In this tutorial,I will lear...How to set Limit on Login Attempt in Laravel7
Hey Artisan Did you ken that you can...