To program some actions in response to the movement of the cursor in the browser window, it is sometimes necessary to determine its coordinates. This can be done by a script that has the ability to track events occurring in the browser. A client-side JavaScript script has this capability. Below is described one of the options for obtaining the cursor coordinates using the capabilities of this language.
Instructions
Step 1
Use the properties of the event object to get the current coordinates of the cursor. This object has a whole set of properties that are relevant to determining the coordinates of the mouse cursor. The LayerX property contains the distance measured in pixels from the left edge of the current layer, and LayerY - the same distance from its top edge. These two properties have synonyms - instead of event. LayerX, you can write event.x, and instead of event. LayerY, you can write event.y. The pageX and pageY properties hold the horizontal and vertical coordinates of the cursor relative to the upper-left edge of the browser window, while the screenX and screenY properties hold similar values relative to the monitor screen.
Step 2
Add browser type checking to your code and use the clientX and clientY properties in addition to the above properties on the event object. This is necessary because Microsoft uses a different property designation in its Internet Explorer browser. You can combine both approaches to determining coordinates, for example, like this:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Step 3
Place the coordinate definition code in a custom function. For example:
function GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"coordX": coordinateX, "coordY": coordinateY};
}
This function returns an array of two named elements, the first of which (with the coordX key) contains the X coordinate, and the second (coordY) contains the Y coordinate.
Step 4
Call this function on some event - for example, on the mouse move event (onmousemove) in the document context. The sample below uses a function to output the mouse coordinates to the status bar:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
