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:
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.
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
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.
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.