Explore various x and y under JavaScript----event objects

Each use of such as client,screen,offset, although usually can be used to, but always feel not so confident right. So tidy up and check back when you need it.

One:clientx and Clienty,screenx and Screeny:

Visible: As is literally said, screen is the mouse relative to the display coordinates, but Screeny does not take a value outside the client area, and the client is relative to the client area.

Two: page coordinates location (page): Pagex and Pagey:

Note: This graph scroll bar is not drawn;

Pagex and Pagey are relative to the document flow, including scroll values, so, in the first screen, and Clientx and clienty no difference;

The div for this figure is an absolutely positioned chunk. At this point Layerx and layery are relative to the yellow block.

Three: Offset: Offsetwidth,offsetheight,offsettop,offsetleft:　　

The offset of an element is defined by its immediate parent element .

Chunk size offset (width/height) =padding+border+content+scroll

So there is no margin(a block with a background does not involve the margin section)

Figure referenced in http://www.cnblogs.com/skylar/p/4121508.html

A way to get the offset in the page :

var getoffset = {
Top:function (obj) {
return obj.offsettop + (obj.offsetparent Arguments.callee (obj.offsetparent): 0)
},//recursion, one layer to the top of the cumulative offsettop
Left:function (obj) {
return Obj.offsetleft + (obj.offsetparent Arguments.callee (obj.offsetparent): 0)
}
};

Offsets are read-only, and each access is recalculated, paying attention to performance issues.

Four: Client area (client) Size:

　Client=padding+content, not including the width of the scroll bar (and, Offset=padding+content+border+scroll), Memory: The client is two parts, Padding and Content;offset are made up of four parts and do not contain margin. No matter who does not close the bird thing.

Five: Scroll size (scroll): Scrollwidth,scrollheight,scrolltop,scrollleft:

"Some elements can also automatically add scroll bars, such as HTML, without executing any code, and some elements need to be added overflow:scroll to have scroll bars."

You can think of HTML elements as scrolling elements in the client area (IE6 before version is body in weird mode, so calculate client area width only: document.documentelement.clientwidth| | Document.body.clientWidth)

Total page height with scroll bar:document.documentelement.scrollheight| | Document.body. ScrollHeight;

　　　Figure referenced in http://www.cnblogs.com/skylar/p/4121508.html

Note: When determining the total document height, you should take the maximum value of scrollheight and clientheight to ensure compatibility.

Eight: not yet adjourned

Explore various x and y under JavaScript----event objects