Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery Tracking The Position Of The User's Mouse

DZone's Guide to

jQuery Tracking The Position Of The User's Mouse

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

You would want to use the "pageX" and "pageY" methods. For example, let's say that we had a single paragraph tag in our document. If we wanted the paragraph tag's text to dynamically display the coordinates of the user's mouse, we could do the following:

$(document).ready(function()
{
$().mousemove(function(e)
{
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
});

View The Example

This code says the following - When the document is ready to be manipulated, we'll listen for when the user moves his or her mouse (mousemove). When it does, we'll set the html of our paragraph tag to display the coordinates (e.pageX and e.pageY, respectively).

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}