Event Co-ordinates

Event Co-ordinates
When an event such as onClick is triggered the returned event object in javascript has details of the mouse position. Different types of co-ordinates are returned in event.screenX, event.clientX, event.offsetX (and corresponding Y values). Details below.

screenX,screenY
Give the screen coordinates when the event occured ie The cursor position on the screen and not on relative to the top left hand corner of the web page.


clientX,clientY

Events coordinates are relative to the browser window instead of the screen. Thus moving the browser around the screen does not affect client co-ordinates. Note that event co-ordinates are not relative to the bottom of the page (ie if the browser window is 800 pixels deep with a page is 2000 pixels long and you scroll to the bottom and click youll get 800 returned as the vertical position and not 2000).


offsetX,offsetY (layerx,layery in firefox)
Gives the co-ordinates within the element on which the event was triggered. If the element is bigger that the browser window - coordinates can exceed the height of the screen.

For more information see
http://www.javascriptkit.com/jsref/event.shtml