How to get the Position of mouse pointer in jQuery ?
Last Updated :
31 Mar, 2021
In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event.pageY property is used to find the position of the mouse pointer relative to the top edge of the document.
Syntax:
event.pageX
event.pageY
Here, we use on() method to attach one or more event handlers for the selected elements and the text() method to set or return the text content of the element
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to get the Position of
mouse pointer in jQuery?
</ title >
< script src =
</ script >
< script >
$(document).ready(function () {
$(document).on("mousemove", function (event) {
$("#GFG").text("Mouse Position ("
+ event.pageX + ", " + event.pageY + ")");
});
});
</ script >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >
How to get the Position of
mouse pointer in jQuery?
</ h3 >
< div id = "GFG" ></ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...