Entry
How can I compute event.offsetX/offsetY which IE provides with Mozilla?
Mar 11th, 2004 04:13
Martin Honnen,
MSIE in its event model provides the properties
offsetX
offsetY
as documented on MSDN at
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/offsetx.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/offsety.asp
These properties are not specified in the W3C DOM Events module and
therefore Mozilla doesn't implement them but there are enough properties
in Mozilla's object model to compute offsetX/offsetY for an event object
if needed.
The following example HTML page provides the code to do that in the
first <script> element of the page and some test case in the remaining
part of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>event.offsetX/offsetY property computation with Mozilla</title>
<script type="text/javascript">
function getOffsets (evt) {
var target = evt.target;
if (typeof target.offsetLeft == 'undefined') {
target = target.parentNode;
}
var pageCoords = getPageCoords(target);
var eventCoords = {
x: window.pageXOffset + evt.clientX,
y: window.pageYOffset + evt.clientY
};
var offsets = {
offsetX: eventCoords.x - pageCoords.x,
offsetY: eventCoords.y - pageCoords.y
}
return offsets;
}
function getPageCoords (element) {
var coords = {x : 0, y : 0};
while (element) {
coords.x += element.offsetLeft;
coords.y += element.offsetTop;
element = element.offsetParent;
}
return coords;
}
</script>
<script type="text/javascript">
function reportEvent (evt) {
var text = evt.type + ' for ';
if (typeof evt.target != 'undefined') {
text += evt.target;
}
else if (typeof evt.srcElement != 'undefined') {
text += evt.srcElement
}
text += '; ';
text += 'clientX: ' + evt.clientX + '; ';
text += 'clientY: ' + evt.clientY + '; ';
text += 'offsetX: ' + evt.offsetX + '; '
text += 'offsetY: ' + evt.offsetY + '; ';
if (typeof evt.offsetX == 'undefined') {
var evtOffsets = getOffsets(evt);
text += 'computed offsetX: ' + evtOffsets.offsetX + '; ';
text += 'computed offsetY: ' + evtOffsets.offsetY + '; ';
}
output(text);
}
function output (text) {
var debugDiv;
if (document.getElementById) {
debugDiv = document.getElementById('debugDiv');
if (debugDiv) {
var p;
if (document.createElement && ((p = document.createElement('p')))) {
p.appendChild(document.createTextNode(text));
debugDiv.insertBefore(p, debugDiv.firstChild);
}
}
}
}
</script>
</head>
<body>
<p id="aP" style="border: 1px solid green;"
onmousemove="reportEvent(event);">
Kibology for all. All for Kibology.
</p>
<div id="debugDiv"
style="border: 1px solid darkgreen; height: 200px; overflow:
auto;"></div>
</body>
</html>
I have tested the code with Mozilla 1.1 and Mozilla 1.4 and hope that
suffices to establish it works with Mozilla 1.0 and later.
