Summary of obtaining mouse position related attributes in JavaScript_javascript skills

Javascript does not have a mouse object. Obtaining mouse coordinates depends on the powerful event object.

By monitoring the mousemove of the document, we can obtain the mouse position in real time.

But! ! There are too many mouse-related attributes in the event, which is very confusing! 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

6 groups in total!

And the difference between them is 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:

Copy code The code is as follows:

http://www.w3.org/1999/xhtml"> />

Show results

In-screen div

Tall and wide. . .

off-screen DIV

<script><br> var jg = document.getElementById('jg');<br> document.onmousemove = function (e) {<br> e = e || window.event;<br> jg.innerHTML = 'layerX:' e.layerX <br> ',layerY:' e.layerY <br> ', <br/>clientX:' e.clientX <br> ',clientY:' e.clientY <br> ', <br/>pageX:' e.pageX <br> ',pageY :' e.pageY <br> ',<br/>offsetX:' e.offsetX <br> ',offsetY:' e.offsetY <br> ',<br/>screenX:' e.screenX <br> ',screenY:' e.screenY <br> ',<br/>x:' e.x <br> ',y:' e.y;<br> }<br> </script>

During the testing process, an artifact was discovered: chrome (Google browser) and IE9 are fully compatible with all the above attributes! It is very convenient to compare them.

After comparison, the results are as follows:

Explanation 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 side (top edge) of the entire screen. They are basically out of touch with the document; they are fully compatible.

offsetX and Y are the coordinates of the mouse relative to the currently pointed object. If the mouse is pointing to the button, offsetX is relative to the button; firefox does not support

x and y are the same as layerX and Y in standard browsers. They are attributes that can be used to replace layerX in IE

pageX and Y are the coordinates of the mouse relative to the left side (top edge) of the entire page, including those outside the viewport; IE7 and 8 do not support them.

Key points: layerX and layerY

LayerX and Y are new attributes introduced by standard browsers and are also supported by IE9. It can be used to replace offsetX and Y. However, it is defined as: the coordinates of the nearest element with positioning information relative to the currently pointing element. This "with positioning" means that there are css attributes that are not positioned by default (that is, not static).

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; all the way to the root element—— html node.

So, in Firefox, if you want the offsetX value, you must add position positioning 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. There is a 2px distance between the document boundary of IE7 and 8 and the browser window boundary, so when the window is maximized, the minimum screenX is 2px;
4. Although layerX and Y in ie9 have values, they are inexplicably incorrect. It seems to be related to the html tag. For example, in the code of my example, drag the scroll bar to the far right and slowly move the mouse from the blank space to the large DIV. At this time, the difference between the rightmost part of the big DIV and the rightmost part of the first DIV will also be calculated into layerX. . . As there are more and more elements at the end, this calculation becomes more complicated; however, firefox and chrome's layerX do 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 x,y attributes.

Compatibility Remediation

In standard browsers, position and event.layerX can be used to implement the event.offsetX attribute;

There is no pageX, pageY in IE7 and 8. You can only use document.documentElement.scrollLeft event.clientX to find it.

So, one of x, y or offsetX, offsetY in IE can be removed.