Test browsers: IE8, Chrome13, FF8, Safari5, Opera11
First, use the test case (using the HTML5 doctype test, you can also see the future development trend, other doctype can be tested by yourself ):Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<Body>
<Div id = 'null'> blank area </div>
<Div id = "btn"> click </div> <! -- The button uses DIV because the native button has a rounded corner and the boundary is unknown. -->
</Body>
<Script type = "text/javascript">
Window. onload = function (){
Var btn = document. getElementById ('btn ');
Btn. onclick = function (e ){
E = e | window. event;
Var box = (e.tar get | 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 implements 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.doc umentElement. scrollLeft +', documentElement. scrollTop: '{document.doc umentElement. scrollTop );
P ('documentelement. clientLeft: '+ document.doc umentElement. clientLeft +', documentElement. clientTop: '{document.doc umentElement. clientTop );
}
}
Function p (s ){
Console. log (s );
}
</Script>
</Html>
Q: How do I obtain the cursor position in the upper left corner of the visible document area of the browser?
A: x, y, clientX, and clientY are both supported. However, x and y indicate the position of the mouse relative to the beginning of the document in IE (that is, if there is a scroll to the bar, it will be included ), and FF does not support x and y.
Recommendation: clientX and clientY
Q: How to get the cursor position relative to the beginning of the document?
A: IE: use x and y (provided that the parent element of the event source (until documentElement) has not set position: relative or the like; otherwise, relative to the nearest element, not to the document)
Non-IE: Use pageX, pageY
LayerX and layerY are actually supported, but IE and Opera are not supported!
So how to ensure that the IE value is normal? A: event. clientX + document.doc umentElement. scrollLeft, event. clientY + document.doc umentElement. scrollTop
Q: How can I obtain the position of the mouse relative to the event source (event.tar get | event. srcElement) in the upper left corner?
A: offsetX and offsetY. But FF does not support it. How can this problem be solved?
1. first obtain the position of the cursor in the upper left corner of the visible document area of the browser.
2. Obtain the location of the event source in the upper left corner of the area of the browser's visual document.
3. Subtract and accept
Some may ask how to do this step 1? Okay, good guys!
HTMLElement. getBoundingClientRect () method
Returned values: {top: xx, right: xx, bottom: xx, left: xx, width: xx, height: xx}
That is to say, the location information of an element is given. What we need to do is:Copy codeThe Code is as follows: var box = (e.tar get | 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 for FF)
In my example, I finally detected scrollLeft, scrollTop, clientLeft, and clientTop. I thought they would be weird. The test results show that:
Except scrollTop, the others are all 0 (of course, scrollLeft is caused by no horizontal scroll bar)
ScrollTop varies with browsers, as shown below:
Body. scrollTop
IE, FF, Opera: 0
Chrome and Safari: the scroll up distance
DocumentElement. scrollTop
IE, FF, and Opera: the scroll up distance
Chrome, Safari: 0
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
