1, offsetx,offsety:
Is the property of the event, not the DOM element's property
Meaning: Sets or gets the position of the mouse relative to the target event's parent element, calculated from the border position of the parent element.
Properties in IE, tested new versions of Chrome, FF support (test environment chrome43 FF34)
2, Pagex,pagey
Is the property of the event, not the DOM element's property
Meaning: relative to the position of the page
Mainstream browsers such as FF Chrome support IE8 and below are not supported (but there is a substitute attribute in IE e.x,e.y and Pagex, Y is the same effect)
3, Offsetleft, OffsetTop
OffsetTop, left: is a DOM element attribute, all supported but browser parsing is not the same
In IE7 and below: Directly relative to the parent element
IE8 and other browsers: This property represents the location of the DOM object in the hierarchy of the DOM object closest to the object, set the parent object of position, and, if not found, the position relative to the root HTML (not the body)
4, the browser default margin padding value
About body padding margin:
Mainstream browsers and ie8:margin:8px
IE7 and the following: margin:15px Padding:medium
5, OffsetParent
Meaning: Looks up the parent element, and the parent element uses the targeting method. If the positioned parent element is not found up, the body is returned
Otherwise, the parent element of this location is returned.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Mouse position</title> <style> /*body{margin:0;padding:0;}*/#posDiv{ /*position:relative; */width:800px;Height:500px;Border:1px solid Red; }#noposDiv{width:100px;Height:100px;Border:10px Solid Green;Margin-left:100px; } </style></Head><Body> <DivID= "Posdiv"> <DivID= "Noposdiv"> </Div> </Div> <Script> varoffparent=document.getElementById ('Noposdiv'). OffsetParent; Console.log ('offparent', offparent); /** * Offsetx,offsety: Is the property of the event, IE and the new version of Chrome, FF are supported * PAGEX:IE8 and below are not supported, other mainstream browser FF Chrome support * * OffsetTop, le FT: is a property of the DOM element, supported but not the same as the browser parsing * in IE7 and below: Directly relative to the parent element * IE8 and other browsers: This property represents the DOM object closest to the object in the DOM object's hierarchy, setting the position parent The position in the object ", if not found, is relative to the root element HTML location * * * About body padding margin: Mainstream browser and ie8:margin:8px * IE7 and the following: margin:15px padding:medium * * offsetParent: Look up the parent element, and the parent element uses the targeting method. If the parent element of the anchor is not found up, returns the body * Otherwise returns the parent element of the anchor. * @type {[type]}*/ varNoposdiv=document.getElementById ('Noposdiv'); if(Noposdiv.addeventlistener) {Noposdiv.addeventlistener ('Click',function(e) {varevtx=E.offsetx; varevty=e.offsety; varPagex=E.pagex; varPagey=E.pagey; varOffleft=Noposdiv.offsetleft; varOfftop=Noposdiv.offsettop; varx=e.x; vary=e.y; Console.log ('OffsetX y', evtx,evty); Console.log ('Pagex y', Pagex,pagey); Console.log ('attribute of the div element offleft', Offleft,offtop); Console.log ('E.x,e.y', E.X,E.Y); ///Same as Pagex in Chrome; Firefox does not support this property },false); }Else if(noposdiv.attachevent) {noposdiv.attachevent ('onclick',function(e) {varevtx=E.offsetx; varevty=e.offsety; varPagex=E.pagex; varPagey=E.pagey; varOffleft=Noposdiv.offsetleft; varOfftop=Noposdiv.offsettop; varx=e.x; vary=e.y; Console.log ('OffsetX y', evtx,evty); Console.log ('Pagex y', Pagex,pagey); Console.log ('attribute of the div element offleft', Offleft,offtop); Console.log ('E.x,e.y', E.X,E.Y); }); } </Script> </Body></HTML>
Mouse position-related properties
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
