Home Home Get Mouse Cursor Current Position in JavaScript jQuery Example

Get Mouse Cursor Current Position in JavaScript jQuery Example

56
0
Get mouse cursor current position in javascript jquery examples
Get mouse cursor current position in javascript jquery examples

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

Get mouse cursor current position in javascript jquery examples
Get mouse cursor current position in javascript jquery examples

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!

Previous articleValidate File Extension During File Upload using JavaScript in Asp.net
Next articleAdo.net – SqlCommand ExecuteScalar Example in Asp.net C# Vb.net
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

eighteen − three =