January 20, 2001 - Retrieving Client Event Location | WebReference

January 20, 2001 - Retrieving Client Event Location

Yehuda Shiran January 20, 2001
Retrieving Client 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 clientX and clientY properties, for example, reveals the location of the event, relative to the document's top left corner, in pixels. The following statement prints the clientX and clientY property values to the status window:

window.status = "X = " + e.clientX + "   Y = " + e.clientY;

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.clientX + "   Y = " + e.clientY;
}
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.