Concept (from network ):
Clientx sets or obtains the X coordinates of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
Clienty sets or obtains the Y coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
Offsetx is used to set or obtain the X coordinate between the cursor position and the object that triggers the event.
Offsety is used to set or obtain the Y coordinate of the object relative to the trigger event.
Screenx is used to set or obtain the X coordinates of the cursor position relative to the user's screen.
Screeny is used to set or obtain the Y coordinate of the mouse pointer position relative to the user's screen.
X sets or obtains the X-pixel coordinates of the cursor position relative to the parent document.
Y sets or obtains the Y pixel coordinate of the cursor position relative to the parent document.
Lab instance (from network, modified ):
View plaincopy to clipboardprint?
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Body onclick = 'test () 'style = "margin: 0 0 0" mce_style = "margin: 0 0 0 0">
<Font color = green> set or obtain the X and Y coordinates of the cursor position relative to the client area of the window. The client area does not include the control and scroll bar of the window. </Font>
<Br/>
Clientx = <input type = "text" name = "X1">
Clienty = <input type = "text" name = "X2">
<Br/>
<Br/>
<Font color = blue> set or obtain the X and Y coordinates of the cursor position relative to the object that triggered the event. </Font>
<Br/>
Offsetx = <input type = "text" name = "X3">
Offsety = <input type = "text" name = "X4">
<Br/>
<Br/>
<Font color = green> set or obtain the X and Y coordinates of the cursor position relative to the user's screen. </font>
<Br/>
Screenx = <input type = "text" name = "X5">
Screeny = <input type = "text" name = "X6">
<Br/>
<Br/>
<Font color = blue> set or obtain the X and Y pixel coordinates of the cursor position relative to the parent document. </Font>
<Br/>
X = <input type = "text" name = "X7">
Y = <input type = "text" name = "X8">
<Br/>
<Br/>
<Table align = "center" width = 400 Height = 500 border = 1 style = "border-style: none" mce_style = "border-style: none "cellpadding = 0 cellspacing = 0 onclick = 'test () '>
<Tr>
<TD> A </TD>
<TD> B </TD>
</Tr>
<Tr>
<TD> C </TD>
<TD> d </TD>
</Tr>
</Table>
</Body>
</Html>
<Script language = "JavaScript">
<! --
Function Test (){
Document. All. x1.value = event. clientx;
Document. All. x2.value = event. clienty;
Document. All. x3.value = event. offsetx;
Document. All. x4.value = event. offsety;
Document. All. x5.value = event. screenx;
Document. All. x6.value = event. screeny;
Document. All. x7.value = event. X;
Document. All. x8.value = event. Y;
}
// -->
</SCRIPT>
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Body onclick = 'test () 'style = "margin: 0 0 0" mce_style = "margin: 0 0 0 0">
<Font color = green> set or obtain the X and Y coordinates of the cursor position relative to the client area of the window. The client area does not include the control and scroll bar of the window. </Font>
<Br/>
Clientx = <input type = "text" name = "X1">
Clienty = <input type = "text" name = "X2">
<Br/>
<Br/>
<Font color = blue> set or obtain the X and Y coordinates of the cursor position relative to the object that triggered the event. </Font>
<Br/>
Offsetx = <input type = "text" name = "X3">
Offsety = <input type = "text" name = "X4">
<Br/>
<Br/>
<Font color = green> set or obtain the X and Y coordinates of the cursor position relative to the user's screen. </font>
<Br/>
Screenx = <input type = "text" name = "X5">
Screeny = <input type = "text" name = "X6">
<Br/>
<Br/>
<Font color = blue> set or obtain the X and Y pixel coordinates of the cursor position relative to the parent document. </Font>
<Br/>
X = <input type = "text" name = "X7">
Y = <input type = "text" name = "X8">
<Br/>
<Br/>
<Table align = "center" width = 400 Height = 500 border = 1 style = "border-style: none" mce_style = "border-style: none "cellpadding = 0 cellspacing = 0 onclick = 'test () '>
<Tr>
<TD> A </TD>
<TD> B </TD>
</Tr>
<Tr>
<TD> C </TD>
<TD> d </TD>
</Tr>
</Table>
</Body>
</Html>
<Script language = "JavaScript">
<! --
Function Test (){
Document. All. x1.value = event. clientx;
Document. All. x2.value = event. clienty;
Document. All. x3.value = event. offsetx;
Document. All. x4.value = event. offsety;
Document. All. x5.value = event. screenx;
Document. All. x6.value = event. screeny;
Document. All. x7.value = event. X;
Document. All. x8.value = event. Y;
}
// -->
</SCRIPT>
Analysis of experiment results:
No examples of different clientx and X values were found during the experiment, so I think they are the same in effect!
Offsetx is relative to the event object (or a region) in the current window. In this example, if you click a region, the value is relative to the <TD> region where A is located, similarly, B, C, and D are all the same!
Clientx, X, and offsetx all share the same thing: they are intended for relative positions, but offsetx is relative to the parent container of the trigger object!
Screenx is an absolute position relative to the client display!
This article from csdn blog: http://blog.csdn.net/weinideai/archive/2009/02/13/3885444.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
