Home > Developer > JavaScript
JavaScript to get the summary of the mouse location-related attributes, javascript mouse
Javascript does not have a mouse object. Obtaining mouse coordinates depends on a powerful event object.
By listening to The mousemove of the document, we can obtain the mouse position in real time.
But !! There are too many mouse-related properties in the event! 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 their differences are not obvious, and browsers are not compatible!
The purpose of this article is to clarify their differences and select those that are not recommended for use.
Test code
Run the following code directly:
Copy codeThe Code 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> <Body> <br/>
<Span id = "jg"> display result </span> <br/>
<Input type = "button" value = "one button"/> </p>
<Div> In-screen div </div>
<Div style = "height: 1000px; width: 2000px; background: # ddd;"> very high and wide... </Div>
<Div> external 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:' + e. y;
}
</Script> <br/>
</Html>
An artifact found during the test: chrome (Google chrome) and IE9 are fully compatible with all of the above attributes! It is very convenient to compare them.
After comparison, the results are as follows:
Meaning of each attribute
ClientX and Y are coordinates of the mouse relative to the browser's viewport (that is, the part outside the scroll bar is ignored.
ScreenX and Y are coordinates of the mouse relative to the left side (top side) of the screen. They are basically out of touch with the document and fully compatible.
OffsetX and Y are the coordinates of the mouse relative to the current object. If the mouse points to the button, offsetX is relative to this button. firefox does not support
X and y are similar to layerX and Y in standard browsers. They are attributes that can be used in IE to replace layerX.
PageX and Y are the coordinates of the mouse relative to the left side (top side) of the entire page, including those outside the viewport. IE7 and 8 are not supported.
Key points: layerX and layerY
LayerX and Y are new properties of the standard browser, and IE9 also supports them. It can be used to replace offsetX and Y. However, it is defined as the coordinates of the element with positioning information closest to the current pointing element. This "positioning" refers to the css attribute (that is, non-static) that is not positioned by default ).
If the currently pointed element has a location, then layerX and Y will return the coordinates relative to the element; otherwise, the parent tag of the element will be viewed; if the element is not located, continue; until the root element is the html node.
Therefore, in firefox, if you want to set the offsetX value, you must add the position positioning information!
Compatibility summary:
1. firefox does not support offsetX, offsetY, and x, y attributes, but it can be replaced by layerX;
2. x and y in ie are equivalent to layerX and layerY in firefox & chrome;
The document boundary of 3, ie7, and 8 has a 2px distance from the window boundary of the browser. Therefore, when the window is maximized, screenX has a minimum of 2px;
4. layerX and Y in ie9. Although they have values, they are inexplicably incorrect. They seem to be related to html tags. For example, in the Code of my example, drag the scroll bar to the rightmost, move the mouse slowly from the blank space to the big DIV. The difference between the rightmost side of the big DIV and the rightmost side of the first DIV will also be included in layerX... As the number of backend elements increases, this computation becomes more complex, while layerX of firefox and chrome does not. Therefore, do not use layerX.
5. In chrome, although x and y have values, they are exactly the same as clientX and Y! Therefore, the x and y attributes are not recommended.
Compatibility remedy
The position and event. layerX can be used in the standard browser to implement the event. offsetX attribute;
No pagex,pageyexists in ie7,8, which can be obtained by using document.doc umentElement. scrollLeft + event. clientX.
Therefore, you can remove x, y, offsetX, and offsetY from IE.
I'm afraid there is no way to do this... It is difficult to know the color of an image... If nested cross-domain iframe exists, it is even more difficult... JavaScript does not have high permissions to run on Web pages. If it is high, the damage is fatal to users... However, if you only get the font color or background color, that would be fine ..
How to obtain the current mouse position in javascript
No event is generated, so an error with no object is reported. You alert (window. event); the second time is null.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
