Relative Coordinates (Mouse Events)

A mouse event is triggered in response to some mouse action that occurs on an element. The coordinates of the event are immediately accessible relative to the window or the entire page. To calculate the coordinates relative to the element that is detecting the click is more difficult. This calculation is shown in the program below.

RelativeEventCoordinates.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="RelativeEventCoordinates.js"></script>
</body>
</html>

RelativeEventCoordinates.js

var qBody = document.getElementsByTagName("body")[0];

// Mouse Move Events
var qMoveDiv = document.createElement("div");
qMoveDiv.style.backgroundColor = "#ffeeaa";
qMoveDiv.style.width = "400px";
qMoveDiv.style.height = "100px";
qMoveDiv.style.margin = "5px";
qMoveDiv.style.color = "#404040";
qMoveDiv.innerHTML = "No Event Yet";
qMoveDiv.onmousemove = function(e) {
	var dElementOffsetX = 0;
	var dElementOffsetY = 0;
	var qElement = this;

	do{
	    dElementOffsetX += qElement.offsetLeft - qElement.scrollLeft;
	    dElementOffsetY += qElement.offsetTop - qElement.scrollTop;
		qElement = qElement.offsetParent
	} while(qElement != document.body);

	var dRelX = e.pageX - dElementOffsetX;
	var dRelY = e.pageY - dElementOffsetY;

	this.innerHTML = "Mouse Move<br /> Page = (" +
		e.pageX + ", " + e.pageY + ")<br />" +
	 	" Client = (" + e.clientX + ", " + e.clientY + ")<br />" +
	 	" Relative = (" + dRelX + ", " + dRelY + ")<br />";
};
qBody.appendChild(qMoveDiv);

Core JavaScript

Relative Coordinates (Mouse Events)

RelativeEventCoordinates.html

RelativeEventCoordinates.js

Output