jQuery | event.pageX property with Examples
The event.pageX is an inbuilt property in jQuery which is used to find the position of the mouse pointer relative to the left edge of the document.
Syntax:
event.pageX
Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns the position of the mouse pointer relative to the left edge of the document.
jQuery code to show the working of event.pageX property:
Code #1:
In the below code, top left position of the mouse-pointer is showing.
<html> <head> <script </script> <script> <!-- jQuery code to demonstrate the x-coordinate of mouse pointer--> $(document).ready(function() { $(document).mousemove(function(event) { $("span").text("X= " + event.pageX); }); }); </script></head> <body> <!-- top left position of the pointer will show here --> <p>X co-ordinate position of the mouse-pointer is : <span></span></p></body> </html> |
Output:
Code #2:
In the below code, top right corner position of the mouse-pointer is showing.
<html> <head> <script </script> <script> <!-- jQuery code o demonstrate the mouse pointer position --> $(document).ready(function() { $(document).mousemove(function(event) { $("span").text("X= " + event.pageX); }); }); </script></head> <body> <!-- top right corner position of the pointer will show here --> <p>X co-ordinate position of the mouse-pointer is : <span></span></p></body> </html> |
Output:
.png)
.png)