Deep understanding of clientx, offsetx, and screenx

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.