About the screeny,pagey,clienty,layery,offsety properties of mouse events (detailed plots)

ScreenY

The offset of the mouse relative to the upper-left corner of the display screen

Pagey

The offset of the mouse relative to the upper-left corner of the page (its value is not affected by the scroll bar)

This property is not supported under IE9

But you can write some code to calculate it. Implementation in jquery:

1 //Calculate pagex/y If Missing and clientx/y available2 if(Event.pagex = =NULL&& Original.clientx! =NULL ) {3Eventdoc = Event.target.ownerDocument | |document;4Doc =eventdoc.documentelement;5BODY =Eventdoc.body;6Event.pagex = Original.clientx + (Doc && Doc.scrollleft | | body && Body.scrollleft | | 0)-(Doc &&A mp doc.clientleft| | Body&&body.clientleft | | 0 );7Event.pagey = Original.clienty + (Doc && Doc.scrolltop | | body && Body.scrolltop | | 0)-(Doc &&A mp Doc.clienttop | | Body && Body.clienttop | | 0 );8}

The simple point implementation is.

The offset of the mouse relative to the browser viewport plus the height of the document's scrollbar hidden minus the clienttop of the document.

1 var pagey = Event.clienty +document.documentelement. Scrolltop-document.documentelement.clienttop

Why Subtract Document.documentElement.clientTop

This is the offset of the browser-specific document under IE8, even if setting Html,body's padding and margin to 0 will not affect its value.

Under the iE7 test, get

1 document.documentElement.clientTop-2px  document.documentElement.clientLeft- 2px  23 document.bocy.clientTop-0px  document.body.clientLeft-0px

ClientY

The offset of the mouse relative to the upper-left corner of the browser viewport

Note the difference between clienty and Pagey, clienty the value is equal to Pagey if the page has no scroll bars

----------------------------------Split-----------------------------------------------

Layery

If the element's position style is not the default static, we say that the element has a positional property.

Finds the closest element with an anchored property in the element that is currently triggering the mouse event and its ancestor element, calculates the mouse's offset value to find the border of the element in the upper-left corner as a relative point. If an element with a positional property is not found, then the offset is computed relative to the current page, which is equivalent to Pagey.

This property is not supported under IE9, but can be replaced with its own offsety

OffsetY

IE Proprietary Properties

The difference between offsety and Layery is that the former, when the offset value is computed, is relative to the inner intersection of the upper-left corner of the element's border, so the offset is a negative value when the mouse is over the border of the element. In addition, OffsetY does not care if the element that triggered the event has a positional property, it always calculates the offset value relative to the element that triggered the event.

Given the differences between Layery and offsety, it is important to be aware of the compatibility

1. The element that triggers the event be sure to set the positioning property.

2. In the case where the element has an upper border border-top, the layery is one more border-top than the value of offsety.

1 var offsetY = event.offsety| | (Event.layery +element.bordertopwidth); 2  // Note that the element.bordertopwidth here need to be replaced with the width of the top border of the calculated element. 

The Layery and OffsetY properties make it easy to calculate the offset of the mouse relative to the bound mouse event element, which is useful at some point.

Here in detail the mouse vertical direction of the offset property, the horizontal direction of the offset is similar, no longer discussed.

About the screeny,pagey,clienty,layery,offsety properties of mouse events (detailed plots)