Understanding jQuery Mousemove Event – .mousemove()

Last Updated: June 4, 2021

The jQuery Mousemove event provides real time X and Y coordinates of the mouse pointer. You can use it to find the current position of your mouse.

Syntax – jQuery .mousemove() event

$(selector).mousemove(function (e) {
// code
});

The jQuery Click event is the most used event in web development, and you should know what are the best ways to use it.

Example – Finding the X and Y coordinates of mouse with .mousemove() event

I have a div element, so when I move my mouse over it then I should get the X and Y coordinates of the pointer.

To create this code I will use the .mousemove() event as shown below:

<div id="div1">Move Mouse Here</div>
 
$("#div1").mousemove(function (e) {
    $(this).html("X coordinate: " + e.pageX + "<br>Y coordinate: " + e.pageY)
});

Download source codes:

DOWNLOAD

Next tutorials which you can’t miss:

1. Understanding the jQuery scrollTop Method with Examples
2. Multiple ways of using jQuery On Method – .on() – in your Website