JavaScript
Article

jQuery Get Relative Mouse Position

By Sam Deering

jQuery code snippet to get the relative position of the mouse pointer. The function takes in the element id as a parameter and the current x and y co-ordinates of the mouse pointer. It then returns the relative distances between the mouse’s cursors current position and the specified element.

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}

Example Usage

jQuery(document).ready(function($) {

	//get the current x and y of the mouse pointer
	var X = $('body').offset().left;
	var Y = $('body').offset().top;
	mouseX = ev.pageX - X;
	mouseY = ev.pageY - Y;
	
	//get the relative position to the #eid element on the page
	alert(rPosition('eid',x,y));

});
  • user67832

    superb! thanks

  • Amit

    How it works in IE? as “pageX ” not work in iE 8.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.