JS Event Object coordinates

JS Event object Coordinates---code

<style= "position:relative;width:100%;height:100%;p adding:15px;margin:20px;" >    <  style= "position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px; Margin:9px;background: #ddd; " onclick = "xy (event)" >    </ Div > </ Body >

        /********************************* event.clientx, Event.clienty mouse relative to the x, Y coordinates (window coordinates) of the viewable area of the browser window, the viewable area does not include toolbars and scroll bars. Both IE events and standard events define these 2 properties Event.pagex, Event.pagey are similar to Event.clientx, Event.clienty, but they use document coordinates rather than window coordinates. These 2 properties are not standard properties, but are widely supported.        There are 2 attributes in the IE event. Event.offsetx, event.offsety the x, y coordinates of the mouse relative to the event source element (srcelement), only IE events have these 2 properties, and standard events do not have corresponding properties. (Local test all browsers have this property) Event.layerx, Event.layery mouse relative to the event source element (srcelement) x, y coordinates, under Firefox use Event.screenx, Event.screeny the x, y coordinates of the mouse relative to the upper-left corner of the user Monitor screen. Both standard events and IE events define these 2 properties *******************************/        functionxy (event) {varevent = event?event:window.event; Console.log ("ClientX:" + Event.clientx + "," + "ClientY:" +event.clienty); Console.log ("PageX:" + Event.pagex + "," + "Pagey:" +event.pagey); Console.log ("x:" + Event.x + "," + "Y:" +event.y); Console.log ("OffsetX:" + Event.offsetx + "," + "OffsetY:" +event.offsety); Console.log ("Layerx:" + Event.layerx + "," + "Layery:" +event.layery); Console.log ("ScreenX:" + Event.screenx + "," + "ScreenY:" +Event.screeny); }        /***************************** Ff:clientx,pagex relative to the viewable area of the browser window (the left side of the browser adds its own padding-left) Note: x is not valid in FF Chrome:clien Tx,pagex,x relative to the viewable area of the browser window (with its own padding-left on the left side of the browser) opera:clientx,pagex,x the viewable area of the browser window (the left side of the browser plus its own padding-left) I E7:clientx relative to the viewable area of the browser window (the left side of the browser with its own padding-left, there is a small deviation), Pagex invalid, clientx two more pixels, X is smaller than Clientx, Basically equals to remove the value after the margin padding ie8:clientx relative to the viewable area of the browser window (the left side of the browser with its own padding-left, there is a small deviation), Pagex invalid, x is smaller than Clientx,        Basically equals the value after removing the margin padding IE9 above: clientx,pagex,x relative to the viewable area of the browser window (the left side of the browser plus its own padding-left), X browser to the left with its own margin-left        Clientx all browser support, ie7,8 has a small deviation PageX ie7,8 does not support x FF does not support IE8 properties, other OK offsetx all browser support Screenx all browsers support *****************************/

Reference article: http://blog.sina.com.cn/s/blog_780a94270101kdgo.html            http://www.2cto.com/kf/201409/333401.html

JS Event Object coordinates