Differences between event.x, event.clientX, event.offsetX_javascript skills

x: Sets or gets the position of the mouse on the x coordinate relative to the outer boundary of the parent element of the target event.
clientX: The x coordinate position relative to the client area, excluding the scroll bar, is the text area.
offsetx: Set or get the position of the mouse on the x coordinate relative to the inner boundary of the parent element of the target event.
screenX: relative to the user screen.
Test code one:
[code]



<script> <br>function reload(){ <br>window.location.reload("http://www.jb51.net"); <br>} <br></script>

< br/>






<script> <br>function window.onbeforeunload() <br>{ <br>alert('event.clientX=' event.clientX );//If the mouse clicks the "Refresh" button, it is related to the position of the mouse click <br>alert('event.offsetX=' event.offsetX); <br>alert('document.body.clientWidth=' document.body.clientWidth); <br>alert('event.clientY=' event.clientY); <br>alert('event.offsetY=' event.offsetY); <br>alert('event.altKey=' event.altKey); <br>if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) <br>{ <br>window.event.returnValue="Are you sure you want to exit this page? "; <br>}else <br>{ <br>alert("You are refreshing"); <br>} <br>} <br></script>
[/html]
Demo Code 2:

<table border="1" cellpadding="15" cellspacing="15" style="position:relative;left:100;top:100"> <tr><td> <div onclick="show()" style="background:silver;cursor:hand"> Click here to show. </div> </td></tr> </table>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<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>