Mouse event screenY, pageY, clientY, layerY, offsetY attribute detail_javascript skills

This article describes the screenY, pageY, clientY, layerY, and offsetY attributes of mouse events. For more information, see

ScreenY

Offset between the mouse and the upper left corner of the screen

PageY

The offset between the mouse and the upper left corner of the page (its value is not affected by the scroll bar)

This attribute is not supported under IE9

However, you can write some code to calculate it. Implementation in jQuery:

The Code is as follows:

// Calculate pageX/Y if missing and clientX/Y available
If (event. pageX = null & original. clientX! = Null ){
EventDoc = event.tar get. ownerDocument | document;
Doc = eventDoc.doc umentElement;
Body = eventDoc. body;
Event. pageX = original. clientX + (doc & doc. scrollLeft | body & body. scrollLeft | 0)-(doc & doc. clientLeft | body & body. clientLeft | 0 );
Event. pageY = original. clientY + (doc & doc. scrollTop | body & body. scrollTop | 0)-(doc & doc. clientTop | body & body. clientTop | 0 );
}

Simple implementation is.

The offset between the mouse and the browser's view plus the hidden height of the document's scroll bar minus the clientTop of the document.

The Code is as follows:

Var pageY = event. clientY using document.doc umentElement. scrollTop-document.documentElement.clientTop

Why does one remove document.doc umentElement. clientTop?

This is the offset of the document specific to the browser under IE8. Even if you set html, the padding and margin values of the body to 0 will not affect the value.

Test in iE7 and obtain

The Code is as follows:

Document.doc umentElement. clientTop --> 2px document.doc umentElement. clientLeft --> 2px
Document. bocy. clientTop --> 0px document. body. clientLeft --> 0px

ClientY

The offset between the mouse and the browser's upper left corner

Note the difference between clientY and pageY. The value of clientY is equivalent to that of pageY when there is no scroll bar on the page.

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

LayerY

If the position style of an element is not static by default, the element has the position attribute.

Find the most recent element with the positioning attribute in the element that triggers the mouse event and its ancestor element, and calculate the offset between the mouse and Its, use the diplomatic point in the upper left corner of the border of the element as the relative point. If no element with the positioning attribute is found, the offset is calculated relative to the current page, which is equivalent to pageY.

This attribute is not supported under IE9, but can be replaced with its unique offsetY.

OffsetY

Proprietary attributes of IE

OffsetY differs from layerY in that the former calculates the offset value relative to the inner point in the upper left corner of the border of the element. Therefore, when the cursor is over the border of the element, the offset value is a negative value. In addition, offsetY does not care whether the element that triggers the event has a positioning attribute. It always calculates the offset value relative to the element that triggers the event.

In view of the differences between layerY and offsetY, you must note that

1. You must set the positioning attribute for the element that triggers the event.

2. When the element has the upper border-top, layerY has one more border-top width value than the offsetY value.

The Code is as follows:

// Here, element. borderTopWidth must be the top Border width of the actually calculated element.
Var borderTopWidth = window. getComputedStyle? Window. getComputedStyle (element, null). borderTopWidth: element. currentStyle. borderTopWidth;
Var offsetY = event. offsetY | (event. layerY + borderTopWidth );

Using the layerY and offsetY attributes, you can easily calculate the offset between the mouse and the bound mouse event element, which is useful in some cases.

The offset attribute in the vertical direction of the mouse is described in detail here. The offset in the horizontal direction is similar and will not be discussed.

The above is all the content of this article. I hope you will like it.