Detailed explanation of screenY, pageY, clientY, layerY, offsetY attributes of mouse events

Detailed explanation of screenY, pageY, clientY, layerY, offsetY attributes of mouse events_javascript skills

WBOY

Release： 2016-05-16 16:10:03

Original

1383 people have browsed it

screenY

The offset of the mouse relative to the upper left corner of the monitor screen

pageY

The offset of the mouse relative to the upper left corner of the page (its value will not be 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 The code is 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 && doc.clientLeft||body&&body.clientLeft || 0 );

Event.pageY = original.clientY ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );

}

Just make it simple.

The offset of the mouse relative to the browser viewport plus the hidden height of the document's scroll bar minus the document's clientTop.

Copy code The code is as follows:

var pageY = event.clientY document.documentElement. scrollTop-document.documentElement.clientTop 

Why subtract document.documentElement.clientTop

This is the offset of the document unique to browsers under IE8. Even if the padding and margin of html and body are set to 0, its value will not be affected.

Tested under iE7 and got

Copy code The code is 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

Pay attention to the difference between clienty and pagey, the value of Clienty is equivalent to Pagey

when there is no rolling bar on the page.

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

layerY

If the position style of an element is not the default static, we say that this element has a positioning attribute.

Find the nearest element with positioning attribute among the element that currently triggers the mouse event and its ancestor element, calculate the offset value of the mouse to it, and find the diplomatic point of the upper left corner of the element's border as the relative point. If an element with a positioning attribute is not found, the offset is calculated relative to the current page, which is equivalent to pageY.

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

offsetY

IE-specific properties

The difference between offsetY and layerY is that when calculating the offset value of the former, it is relative to the inner intersection point of the upper left corner of the element's border. Therefore, when the mouse is on the element's border, 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 triggered the event.

In view of the difference between layerY and offsetY, you must pay attention to using them compatiblely

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

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

Copy code The code is as follows:

//The element.borderTopWidth here must be the actual calculated top border width of the element. 

var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; 

var offsetY = event.offsetY||(event.layerY borderTopWidth);

Through the layerY and offsetY attributes, you can easily calculate the offset of the mouse relative to the element bound to the mouse event, which is very useful at certain times.

The offset properties of the mouse in the vertical direction are described in detail here. The offset properties in the horizontal direction are similar and will not be discussed again.

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