Using jQuery mousemove() Method to Capture Mouse Pointer location

We can use jQuery mousemove() method to capture mouse pointer location on a web page. This method triggers the mouse movement event or calls a function when a mousemove event occurs. You can apply the method to capture the mouse pointer location on the entire web page or inside an element.

Syntax

$('selector').mousemove(function)

You can use this method for animations, to pinpoint a location on an image etc.

Now let’s see how the method works with few simple examples. The first example shows how to capture the location of the mouse pointer on a web page (the entire page). The second example shows how to capture the mouse pointer location inside a element. You can use any other element like a <div>, or an <img >.

The Markup

I have a element on my web page to show the coordinates of the mouse pointer. Move the mouse anywhere on the web page and it will get the coordinates and show it using the element.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <p id="mCoord"></p>
</body>

The Script

<script>
    $(document).mousemove(function (e) {
        $('p').text(e.pageX + ', ' + e.pageY);
    });
</script>

The mousemove() method triggers an event. Gets the X and Y coordinates and displays it in the element. When applying the method with $(document), it captures the mouse pointer movement anywhere on the web page.

You can restrict and capture the mouse pointers location to a specific element. For example, I want to get the X and Y coordinate of the mouse inside the element only. This is how you do it.

The Markup

<p id="pCoord" style="width:200px;height:200px;border:solid 1px black;text-align:center;"></p>

The Script

<script>
    $('p').mousemove(function (e) {
        var offset = $(this).offset();
        var X = (e.pageX - offset.left);
        var Y = (e.pageY - offset.top);
        
        $('p').text(X + ', ' + Y);
    });
</script>

In the above example, I am using the mousemove() method with the element. Therefore, it gets coordinates of the mouse pointer inside the element.

Note: If you have multiple P elements on your web page, use the element ID. For example,

<script>
    $('#pCoord').mousemove(function (e) {
        var offset = $(this).offset();
        var X = (e.pageX - offset.left);
        var Y = (e.pageY - offset.top);
        $('#pCoord').text(X + ', ' + Y);
    });
</html>

Try it

Using mousemove() Method with other jQuery Methods

You can use jQuery mousemove() method with other methods to get interesting results. In my third example, I am using the jQuery .offset() method, inside the mousemove() method to attach the element () with the mouse pointer.

As long as the mouse pointer in inside a set perimeter, let’s say 500px X or Y, the element will remain attached with the mouse cursor and greet the user with a Hello. When the mouse pointer crosses the perimeter, will simply show the X and Y coordinates (the location) of the mouse.

The Markup

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <p id="pCoord" style="width:200px;height:200px;"></p>
</body>

The Script

<script>
    $(document).mousemove(function (e) {
        $('p').text(e.pageX + ', ' + e.pageY);

        if (e.pageX <= 500 && e.pageY <= 500) {
            $('p').text('Hello');
            $('p').offset({ left: e.pageX, top: e.pageY });
        }
    });
</script>

← PreviousNext →