screenY
Mouse offset from the upper left corner of the monitor screen
pageY
The offset of the mouse from the upper left corner of the page (its value will not be affected by the scroll bar)
This property is not supported under IE9
But you can write some code to calculate it. Implementation in jQuery:
The code copy 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 implement it simply.
The offset of the mouse relative to the browser viewport plus the hidden height of the document's scrollbar minus the clientTop of the document.
The code copy is as follows:
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 the html is set to 0, the padding and margin of the body will not affect its value.
Tested under iE7, get
The code copy is as follows:
document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> 2px
document.bocy.clientTop --> 0px document.body.clientLeft --> 0px
clientY
Mouse offset from 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 scroll bar on the page.
----------------------------------segmentation-----------------------------------------------
layerY
If the position style of an element is not the default static, we say that this element has positioning attributes.
Find the closest element with positioning attributes in the element that currently triggers the mouse event and its ancestor elements, calculate the offset value of the mouse from it to find the diplomatic point in the upper left corner of the border of the element as the relative point. If an element with the positioning attribute cannot be found, then the offset is calculated relative to the current page, which is equivalent to pageY at this time.
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, the former is relative to the inner intersection point in the upper left corner of the border of the element. Therefore, when the mouse is on 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 positioning attributes. It always calculates the offset value relative to the element that triggers the event.
Given the difference between layerY and offsetY, you should pay attention to the use of compatible two.
1. The element that triggers the event must set the positioning attribute.
2. When the element has the upper border-top, layerY has one more border-top width value than offsetY's value.
The code copy is as follows:
//The element.borderTopWidth here must be the upper 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);
Through the layerY and offsetY properties, it is very convenient to calculate the offset of the mouse relative to the bound mouse event element, which is very useful at some times.
Here we talk about the offset attribute of the vertical direction of the mouse. The offset in the horizontal direction is similar, so we will not discuss it anymore.
The above is all about this article, I hope you like it.