But you know, the browser is too discordant, compatibility and do not say that a variety of coordinate properties to see people dizzy, very easy to confuse. Well, let me summarize:
Test browser: IE8, Chrome13, FF8, Safari5, OPERA11
Test Cases first (with HTML5 DOCTYPE test, also can see future development trend, other DOCTYPE can test themselves):
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
<style type= "Text/css" >
HTML {
background:red;
}
Body {
Background:green;
}
#null {
height:1000px;
}
#btn {
Cursor:default;
Background:blue;
width:50px;
height:30px;
line-height:30px;
Text-align:center;
}
</style>
<body>
<div id= ' null ' > blank area </div>
<div id= "BTN" > Click </div><!--button with Div because the native button has rounded corners, indeterminate bounds-->
</body>
<script type= "Text/javascript" >
Window.onload = function () {
var btn = document.getElementById (' btn ');
Btn.onclick = function (e) {
E = e| | window.event;
var box = (E.target | | e.srcelement). Getboundingclientrect (),
OffsetX = E.clientx-box.left,
OffsetY = E.clienty-box.top;
P (' x: ' + e.x+ ', y: ' +e.y);
P (' Pagex: ' + e.pagex+ ', Pagey: ' +e.pagey ');
P (' OffsetX: ' + e.offsetx+ ', OffsetY: ' +e.offsety ');
P (' FF implementation offsetX: ' +offsetx+ ', OffsetY: ' +offsety ');
P (' Layerx: ' + e.layerx+ ', layery: ' +e.layery ');
P (' ClientX: ' + e.clientx+ ', ClientY: ' +e.clienty ');
P (' body.scrollleft: ' + document.body.scrollleft+ ', body.scrolltop: ' +document.body.scrolltop ');
P (' body.clientleft: ' + document.body.clientLeft + ', body.clienttop: ' +document.body.clienttop ');
P (' documentelement.scrollleft: ' + document.documentelement.scrollleft+ ', Documentelement.scrolltop: ' + DOCUMENT.DOCUMENTELEMENT.SCROLLTOP);
P (' documentelement.clientleft: ' + document.documentElement.clientLeft + ', Documentelement.clienttop: ' + DOCUMENT.DOCUMENTELEMENT.CLIENTTOP);
}
}
function P (s) {
Console.log (s);
}
</script>
Q: How do I get the position of the mouse relative to the upper-left corner of the viewable document area of the browser?
A: x, Y and Clientx, clienty are all available, but x, y in IE indicates the mouse's position relative to the beginning of the document (that is, if there is a scroll to the bar, it will be counted), and FF does not support X, y
Recommendation: ClientX, ClientY
Q: How do I get the mouse position relative to the beginning of the document?
A: IE: Use X, Y (provided that the parent element of the event source (up to documentelement) is not set to position:relative, otherwise relative to the nearest element rather than to the document)
Non ie: using Pagex, Pagey
Layerx, Layery actually can also, but IE and opera do not support!
So how to ensure that ie normal value? Answer: Event.clientx + document.documentElement.scrollLeft, Event.clienty + document.documentElement.scrollTop
Q: How to get the mouse relative to the event source (event.target| | event.srcelement) position in the upper-left corner?
Answer: OffsetX, OffsetY. But FF does not support, how to do?
1. First get the mouse position relative to the upper-left corner of the viewable document area of the browser
2. Then get the location of the event source relative to the upper-left corner of the browser's visual document area
3. Subtract, wrap up
Some people may ask, how do you do this 2nd step? Well, the good guys do it!
Htmlelement.getboundingclientrect () method
The return value is: {top:xx, right:xx, Bottom:xx, Left:xx, Width:xx, height:xx}
That is to say, the position information of an element is given, and all we have to do is:
Copy Code code as follows:
var box = (E.target | | e.srcelement). Getboundingclientrect (),
OffsetX = E.clientx-box.left,
OffsetY = E.clienty-box.top;
After testing, all browsers are consistent with Event.offsetx, event.offsety (except FF, of course).
In my case, I finally tested ScrollLeft, scrolltop, ClientLeft, ClientTop, who thought they were going to be a couple of mischief, and the test results showed:
In addition to ScrollTop, the other is 0 (of course scrollleft is due to the fact that there is no horizontal scroll bar)
ScrollTop Browser performance is different, as follows:
The situation of Body.scrolltop
IE, FF, opera:0
Chrome, Safari: The distance to scroll up
The situation of Documentelement.scrolltop
IE, FF, Opera: The distance to scroll up
Chrome, safari:0
