Event. x, event. clientX, event. offsetX differences _ javascript skills

The differences between event. x, event. clientX, and event. offsetX are as follows. X: set or obtain the position of the outer boundary of the parent element of the mouse relative to the target event on the x coordinate.
ClientX: The x coordinate position of the client region, excluding the scroll bar, that is, the body area.
Offsetx: set or obtain the position of the inner boundary of the parent element of the mouse relative to the target event on the x coordinate.
ScreenX: relative to the user screen.
Test code 1:
[Code]



Script
Function reload (){
Window. location. reload ("http://www.jb51.net ");
}
Script





















Script
Function window. onbeforeunload ()
{
Alert ('event. clientX = '+ event. clientX); // if you click the refresh button, it depends on the position when you click the mouse.
Alert ('event. offsetX = '+ event. offsetX );
Alert ('document. body. clientWidth = '+ document. body. clientWidth );
Alert ('event. clientY = '+ event. clientY );
Alert ('event. offsetY = '+ event. offsetY );
Alert ('event. altKey = '+ event. altKey );
If (event. clientX> document. body. clientWidth & event. clientY <0 | event. altKey)
{
Window. event. returnValue = "are you sure you want to exit this page? ";
} Else
{
Alert ("You are refreshing ");
}
}
Script
[/Html]
DEMO code 2:

<Table border = 1 cellpadding = 15 cellspacing = 15 style = "position: relative; left: 100; top: 100 "> <tr> <td> <p onclick =" show () "style =" background: silver; cursor: hand "> Click here to show. </p> </td> </tr> </table> script function show () {alert ("window. event. x: "+ window. event. x + "\ nwindow. event. y: "+ window. event. y + "\ nevent. clientX: "+ event. clientX + "\ nevent. clientY: "+ event. clientY + "\ nevent. offsetX: "+ event. offsetX + "\ nevent. offsetY: "+ event. offsetY + "\ nwindow. event. screenX: "+ window. event. screenX + "\ nwindow. event. screenY: "+ window. event. screenY);} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]