In my previous tutorials, I’d explained how to send test mail using gmail smtp settings, how to export gridview selected rows to word excel text and pdf, how to send html web page as email and other more cracking tutorials on Asp.net, JavaScript, jQuery here.
Now here in this tutorial, I’ll explain how to get the current position of the mouse cursor in javascript or jquery with few examples.
I’ll also cover the points about how to get current co-ordinates location of the window screen, xAxis, yAxis and position of the parent as well as child element on the button click event.
To get start, first we need to add reference of jQuery in head section.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"> </script>
Note: For this tutorial you need to use jQuery 1.7.2.js or higher version to run all the examples on the flow. Also if you want whole HTML Markup code, you can go below and download the complete tutorial.
Following are the various sample code-snippets to get cursor current position.
Get Cursor Current Position on Button Click Event
<script type="text/javascript">
//Get current cursor position
$(document).on("click", "#btnGetCurrentOffset", function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Parent Element Position
<script type="text/javascript">
//Get parent elements position from cursor position clicked
$(document).on("click", "#btnGetParentOffset", function (e) {
//Getting parent element offset
var parentOffset = $(this).parent().offset();
//now minus parent element offset instead current element
var xOffset = e.pageX - parentOffset.left;
var yOffset = e.pageY - parentOffset.top;
$("#lblParentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Child Element Position
<script type="text/javascript">
//Get parent elements position from cursor position clicked
$(document).on("click", "#btnGetParentOffset", function (e) {
//Getting parent element offset
var parentOffset = $(this).parent().offset();
//now minus parent element offset instead current element
var xOffset = e.pageX - parentOffset.left;
var yOffset = e.pageY - parentOffset.top;
$("#lblParentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Cursor Current Position on Mousemove
<script type="text/javascript">
//Get the cursor position depending on cursor movement
$(document).mousemove(function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentPointerPosition").text("xOffset is " + xOffset + " and " + "yOffset is " + yOffset + "");
});
</script>
HTML Markup – [.aspx]
Following is the complete HTML Markup code for .aspx page that I used for the demonstration:
<html>
<head>
<title>Get mouse cursor current position examples</title>
<style type="text/css">
button {
width: 200px;
height: 27px;
}
table tr td {
width: 250px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
//Get current cursor position
$(document).on("click", "#btnGetCurrentOffset", function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get parent elements position from cursor position clicked
$(document).on("click", "#btnGetParentOffset", function (e) {
//Getting parent element offset
var parentOffset = $(this).parent().offset();
//now minus parent element offset instead current element
var xOffset = e.pageX - parentOffset.left;
var yOffset = e.pageY - parentOffset.top;
$("#lblParentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get child elements position from cursor position clicked
$(document).on("click", "#btnGetChildOffset", function (e) {
//Getting child element offset
var currOffset = $(this).offset();
var parentOffset = $(this).parent().offset();
//now minus child element offset instead current element
var xOffset = currOffset.left - parentOffset.left;
var yOffset = currOffset.top - parentOffset.top;
$("#lblChildOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get the cursor position depending on cursor movement
$(document).mousemove(function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentPointerPosition").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
</head>
<body>
<br />
<br />
<table>
<tr>
<td>
<button id="btnGetCurrentOffset">Get My Current Position</button></td>
<td>
<label id="lblCurrentOffset" />
</td>
</tr>
<tr>
<td>
<button id="btnGetParentOffset">Get My Parent Position</button></td>
<td>
<label id="lblParentOffset" />
</td>
</tr>
<tr>
<td>
<button id="btnGetChildOffset">Get My Child Position</button>
<div></div>
</td>
<td>
<label id="lblChildOffset" />
</td>
</tr>
<tr>
<td>Current cursor pointer position is:</td>
<td>
<label id="lblCurrentPointerPosition" />
</td>
</tr>
</table>
</body>
</html>
Example Result
You may also like, 100+ Frequently Asked Interview Questions on Asp.net, Top 10 OOPS Concepts in .NET C# with Examples here.
Download Example
That’s it, this is simplest way to get mouse cursor current position in javascript or jquery example in .net.
Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.
Happy Coding!
