Screeny,pagey,clienty,layery,offsety Properties of mouse events detailed _javascript tips

ScreenY

Offset of the mouse relative to the top 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 attribute is not supported under IE9

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

Copy Code code as follows:

Calculate pagex/y if missing and clientx/y available
if (Event.pagex = = null && original.clientx!= null) {
Eventdoc = Event.target.ownerDocument | | Document
doc = eventdoc.documentelement;
BODY = Eventdoc.body;
Event.pagex = Original.clientx + (Doc && Doc.scrollleft | | body && Body.scrollleft | | 0)-(Doc &&A mp doc.clientleft| | Body&&body.clientleft | | 0);
Event.pagey = Original.clienty + (Doc && Doc.scrolltop | | body && Body.scrolltop | | 0)-(Doc &&A mp Doc.clienttop | | Body && Body.clienttop | | 0);
}

The simple point of implementation is.

The offset of the mouse relative to the browser viewport plus the height of the document's scroll bar hides the clienttop of the document.

Copy Code code as follows:

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

Why Subtract Document.documentElement.clientTop

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

Under the iE7 test, get

Copy Code code as follows:

Document.documentElement.clientTop--> 2px document.documentElement.clientLeft--> 2px
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 values equal to Pagey when 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 attribute.

Finds the most recent element with a positional attribute in the element that triggers the mouse event and its ancestor element, calculates the mouse's offset value, and finds the diplomatic point in the upper-left corner of the element's border as a relative point. If an element with a positional attribute 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 it can be replaced with its own offsety

OffsetY

IE Proprietary properties

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

In view of the differences between Layery and offsety, it is to be noted that the compatible use

1. The element that triggers the event must set the positioning attribute.

2. In the case where the element has a top border border-top, the layery is one more border-top width than the offsety value.

Copy Code code as follows:

The element.bordertopwidth here must be the width of the top border of the actual calculated element.
var bordertopwidth = window.getComputedStyle? window.getComputedStyle (element,null). BorderTopWidth:element.currentStyle.borderTopWidth;
var OffsetY = event.offsety| | (Event.layery + bordertopwidth);

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

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

The above is the entire content of this article, I hope you can enjoy.