JavaScript does not have a mouse object, and it depends on a powerful event object to obtain mouse coordinates.
By listening to the mousemove of the document, we can get the mouse position in real time.
but! ! There are too many attributes related to the mouse in the event, which is very exciting! as follows:
| event.layerX | event.layerY |
| event.clientX | event.clientY |
| event.pageX | event.pageY |
| event.offsetX | event.offsetY |
| event.screenX | event.screenY |
| event.x | event.y |
A total of 6 groups!
Moreover, their differences are not obvious, and the browsers are not compatible!
The purpose of this article is to clarify their differences and select those that are not recommended.
Test code
Run the following code directly:
The code copy is as follows:
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
div {min-height: 300px; background-color: #eee;}
#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg">Show results</span><br />
<input type="button" value="a button" /></p>
<div>Div in-screen</div>
<div style="height:1000px; width:2000px; background:#ddd;">very high and wide. . . </div>
<div>Off-screen DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function (e) {
e = e || window.event;
jg.innerHTML = 'layerX:'+e.layerX+
',layerY:'+e.layerY+
', <br/>clientX:'+e.clientX+
',clientY:'+e.clientY+
', <br/>pageX:'+e.pageX+
',pageY :'+e.pageY+
',<br/>offsetX:'+e.offsetX+
',offsetY:'+e.offsetY+
',<br/>screenX:'+e.screenX+
',screenY:'+e.screenY+
',<br/>x:'+e.x+
',y:'+ey;
}
</script><br />
</html>
During the test, I found a magical tool: Chrome (Google Chrome) and IE9 are compatible with all the above attributes! It is very convenient to compare them.
After comparison, the results are as follows:
Definition of each attribute
clientX and Y are the coordinates of the mouse relative to the browser viewport (i.e., the part outside the scroll bar is ignored); all browsers support it.
screenX and Y are the coordinates of the mouse relative to the left (top edge) of the entire screen, which is basically out of touch with the document; it is fully compatible.
offsetX and Y are the coordinates of the mouse relative to the object currently pointed to. When the mouse points to the button at this time, offsetX is relative to this button; firefox does not support
x and y, layerX and Y in the same standard browser, are attributes that can be used to replace layerX in IE.
pageX and Y are the coordinates of the mouse relative to the left (top edge) of the entire page, including outside the viewport; IE7 and 8 do not support it.
Key points: layerX and layerY
layerX and Y are new attributes released by standard browsers, and IE9 also supports them. He can be used instead of offsetX and Y. However, his definition is: the coordinates of the element with positioning information relative to the current pointing element. This "positioned" refers to a css attribute (i.e., non-static) that has non-default positioning.
If the currently pointed element is positioned, then layerX and Y will return the coordinates relative to this element; otherwise, check the parent tag of this element; if there is still no positioning, continue; until the root element - html node.
Therefore, in firefox, if you want to offsetX value, you must add position position information!
Compatibility summary:
1. Firefox does not support offsetX, offsetY and x,y attributes, but they can be replaced by layerX;
2. x and y in ie are equivalent to layerX and layerY in firefox&chrome;
3. The boundary of the document of ie7 and 8 is 2px away from the boundary of the browser window, so screenX has a minimum distance of 2px when the window is maximized;
4. Although layerX and Y in ie9 have values, they are inexplicably incorrect. They seem to be related to the html tag. For example, in my example code, drag the scroll bar to the rightmost, and the mouse slowly moves from the blank to the big DIV. At this time, the difference between the rightmost and the rightmost of the first DIV will also be included in layerX. . . As there are more and more elements at the end, the more complicated the calculation is; while the layerX of firefox and chrome does not have this problem. So, don't use layerX in IE9.
5. In chrome, although x and y have values, they are exactly the same as clientX and Y! Therefore, it is not recommended to use the x,y attributes.
Compatibility Remedy
In standard browsers, position and event.layerX can be used to implement the event.offsetX attribute;
There is no pageX or pageY in IE7. You can only use document.documentElement.scrollLeft+event.clientX to find it.
Therefore, one of x, y or offsetX and offsetY in IE can be removed.