Javascript coordinates: event. x, event. clientX, event. offsetX, and event. scree

Source: Internet
Author: User

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.

When event. clientX returns an event, the mouse is the same as the X coordinate of the client window. However, if the property value of the event object is set to relative, event. clientX remains the same, and event. X returns the coordinates of the event object relative to the ontology.

 

The Code is as follows <script>
Var strInfo = "";
StrInfo + = "rn visible area width:" + document. body. clientWidth;
StrInfo + = "rn webpage visible area Height:" + document. body. clientHeight;
StrInfo + = "rn visible area width of the webpage:" + document. body. offsetWidth + "(including the width of the edge )";
StrInfo + = "rn visible area Height:" + document. body. offsetHeight + "(including the width of the edge )";
StrInfo + = "rn webpage body full text width:" + document. body. scrollWidth;
StrInfo + = "rn webpage text Height:" + document. body. scrollHeight;
StrInfo + = "rn webpage volume Height:" + document. body. scrollTop;
StrInfo + = "rn webpage volume left:" + document. body. scrollLeft;
StrInfo + = "rn webpage body part:" + window. screenTop;
StrInfo + = "rn webpage body part left:" + window. screenLeft;
StrInfo + = "rn screen resolution height:" + window. screen. height;
StrInfo + = "rn screen resolution width:" + window. screen. width;
StrInfo + = "rn available workspace Height:" + window. screen. availHeight;
StrInfo + = "rn available workspace width:" + window. screen. availWidth;
Window. confirm (strInfo );
</Script>

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

The Code is as follows:
<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>
<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>
 

When event. clientX returns an event, the mouse is relative to the X coordinate of the customer window.
The same is true for event. X.
However, if the property value of the event object is set to relative
Event. clientX unchanged
Event. X returns the coordinates of the event object relative to the ontology.
Event object details ICOOE 2000.3.31 http://www.hzhuti.com
Event indicates the event status, such as the event element and the mouse position. The event object is valid only during the event process.

Event property:

AltKey
Retrieves the current state of the ALT key
The possible value true is disabled.
False indicates not to close

Button
Retrieve the pressed mouse key
Possible value: 0 without buttons
1 left click
2. Right-click
3. Press the Left or Right key.
4. Press the intermediate key
5. Press the left and intermediate keys.
6. Right-click and select intermediate key.
7. Press all keys

CancelBubble
Set or retrieve whether the current event will bubble the event handle
Possible value: false enable blister
True cancel this event bubble

ClientX
Retrieves the X coordinates of the mouse cursor related to the client area of the window. The attribute is read-only and there is no default value.

ClientY
Retrieves the Y coordinate of the mouse cursor related to the client area of the window. The attribute is read-only and there is no default value.

CtrlKey
CtrlKey: retrieves the current status of the CTRL key
The possible value true is disabled.
False indicates not to close

Dataworks
Retrieve the columns affected by oncellchange

ATransfer
Provides a pre-defined clipboard format for drag-and-drop operations.

Element
Retrieve the object pointer that exits during the on mouseover and on mouseout events

KeyCode
Set or retrieve the Unicode keyword code associated with the keyword that triggers the event
This attribute is used with onkeydown onkeyup onkeypress.
If no keyword is triggered, the value is 0.

OffsetX
Retrieve the horizontal coordinates of the mouse position related to the object that triggered the event

OffsetY
Retrieve the vertical coordinates of the mouse position related to the object that triggered the event

PropertyName
Retrieve the name of the feature that has been changed on the object

Reason
Retrieve the data transfer results of the data source object
Possible values:
0 data transmission successful
1. Data Transmission failed.
2. Data Transmission Error

Recordset
Retrieve the reference of the default record set in the data source object
This feature is read-only.

Repeat
Checks whether an event is repeated.
This attribute returns true only when the onkeydown event is repeated.

Returnvalues
Set or retrieve the value returned from the event
Possible values:
The value in the true event is returned.
False: the default operation of events on the source object is canceled.

ScreenX
Retrieve the horizontal positions of the mouse related to the User Screen

ScreenY
Retrieve the vertical positions of the mouse related to the User Screen

ShiftKey
Retrieves the current status of the shiftKey.
The possible value true is disabled.
False indicates not to close

SrcElement
Retrieve the trigger event object

SrcFilter
Retrieve the filter object triggered by the onfilterchange event

SrcUm
Retrieve the same resource name that triggers event Behavior
This feature is set to null unless both of the following conditions are true.
1. The action is appended to the element of the trigger event.
2. The behavior defined in the previous project symbol already specifies an URN identifier and triggered event

ToElement
Retrieve objects that are moved as results of the on mouseover or on mouseout event

Type
Retrieve the event name in the event object

X
Returns an integer relative to the horizontal coordinate of the cursor of the parent element.

Y
Returns an integer relative to the vertical coordinate of the parent element.

 
From php development
 

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.