January 17, 2001 - Retrieving Element Event Location | WebReference

January 17, 2001 - Retrieving Element Event Location

Yehuda Shiran January 17, 2001
Retrieving Element Event Location
Tips: January 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

The e object holds a lot of information about the Netscape 6 event. The layerX and layerY properties, for example, reveals the location of the event, relative to the element's top left corner, in pixels. The following statement prints the layerX and layerY property values to the status window:

window.status = "X = " + e.layerX + "   Y = " + e.layerY;

The status window is shown on the bottom left corner of Netscape 6 window. Notice that you have to pass the e object as a parameter to those functions which reference it. In the following example, we pass the e object as a parameter to colorItTan():

<DIV ID="demoDiv" STYLE="position:relative; left:100px; top:20px; width:250px; 
height:45px; color:blue; background-color:yellow;">Click me with the left button! 
</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
var demoObj;
function init() {
  demoObj = document.getElementById("demoDiv");
  demoObj.addEventListener("click", colorItTan, false);
}
function colorItTan(e) {
  demoObj.style.backgroundColor = "tan";
  window.status = "X = " + e.layerX + "   Y = " + e.layerY;
}
onload = init; 
// -->
</SCRIPT>

Get on Netscape 6 browser and play with this demo. Click the left button and observe the coordinates in the status window.