Mouse events are in a specific location, we can use the various properties of event events to get the coordinate position of the event, there are relative to the viewport, there is relative to the entire document, the same page element position has a relative viewport, there are scrolling, these are more easily confused, so tidy up here, memo Unknown origin
1. Client area coordinate location (clientx/clienty)We can get the horizontal and vertical coordinates of the mouse pointer in the viewport with the event event object's Clientx/clienty property.
：
2. Screen coordinate position (Screenx/screnny)The Screenx/screeny property of the event events object allows you to get the coordinate information of the mouse cursor relative to the entire computer screen when a mouse event occurs.
：Clientx/clienty and Screenx/screeny differences demo:clientx/clienty and Screenx/screeny difference Demo
Demo Source code stamp here: https://github.com/demo.html
3. Page coordinate location (pagex/pagey)The Pagex/pagey property of the event object allows you to get the coordinate position (including scrolling) of the mouse cursor relative to the entire document element when the mouse event occurs.
In cases where the page does not scroll, the value of pagex/pagey is usually equal to the value of Clientx/clienty.
4.layerx/layeryThe event object also has a less common attribute, which is layerx/layery, which is for an absolutely positioned element, relative to the upper-left corner of the current click Element. When the elements on the page are relatively positioned (position:relative), the values of pagex/pagey and layerx/layery are usually the same, but when the element is absolutely positioned (position:absolute), layerx/ Layery positions the mouse cursor position relative to the upper-left corner of itself.
The following demo helps to understand, poke:
Pagex/pagey & layerx/layery schematic demo:pagex/pagey & layerx/layery
Demo code jab here: https://github.com/pageXandLayerX.html
5. Offset: (offsetwidth/offsetheight/offsetleft/offsettop)The offset of the element (Offsetleft/offsettop) is relative to its immediate parent element.
[The visible size of an element is determined by its height and width, which includes all padding (padding), ScrollBar, and border (border) size (note that the polygon does not include margin, because margin is transparent and typically uses it to control the spacing between elements). This is why, because, you can try, if we add a background to the element, then the background will be applied to the content and the inner margin of the area, and the added border (border) will be in the inner margin (padding) outside the area to add a line, margin transparent, of course, not within the visible range. ]
：
Tips:
1. If you want to know the offset of an element on the page, add the Offsetleft and offsettop of the element to the same property as the offsetparent, and then loop to the root element to get a basic, accurate value.
2. If some div offsetparent is <body>, then you can try the Getelementleft () and Getelementtop () method, No unexpected words return the same values as Offsetleft and offsettop.
3. All of these offsets are read-only and need to be recalculated each time they are accessed, paying attention to performance issues.
6. Size of client area (clientwidth/clientheight)The size of the client area of an element is the size of the element's content and the space occupied by the padding (the space occupied by the scrollbar is not counted). (Clientwidth=width+padding (left, right); clientheight=height+padding (top, bottom))
ClientWidth and Offsetwidth Example: differences between ClientWidth and offsetwidth
7. Scrolling size (scrollwidth/scrollheight/scrollleft/scrolltop)Some elements, even if no code is executed, automatically add scroll bars, such as
It is generally assumed that the
When the overflow property is set to auto, the content can exceed the dimensions of the element and display scroll bars. You can then use the ScrollWidth property to retrieve elements within the width range of the content.
The relevant example is found on MSDN: ScrollWidth Property Example
More specific information can be viewed here: MSDN scrollwidth
Tips:
When determining the total height of a document, you must obtain the maximum value in ScrollWidth, ClientWidth, and ScrollHeight, clientheight, to ensure that more accurate results are achieved in cross-browser situations.
8.getBoundingClientRect () methodThe getboundingclientrect is used to get the position of the left, top, right, and bottom of an element in the page relative to the browser window respectively. Getboundingclientrect is the distance from the DOM element to the viewable range of the browser (it does not contain the rolled-up parts of the document). The function returns an object that has 6 properties: top,lef,right,bottom,width,height; The top, left, and CSS are very similar in understanding, width, height is the height of the element itself, but right , the understanding in bottom and CSS is a bit different. Right is the distance from the leftmost edge of the window to the left of the element, and bottom refers to the distance from the top of the window to the bottom of the element.
This method makes it easy to get the position of the page element:
var x= this.getboundingclientrect (). Left+document.documentelement.scrollleft;var Y =this.getboundingclientrect (). Top+document.documentelement.scrolltop;
This method is explained in detail on MSDN: Getboundingclientrect () method
Summarize:The above attributes are easy to confuse. Also pay attention to the different browsers may exist differences, when using the test can be more accurate application.
Figure out the above related properties and methods, you should be able to understand the moustache wrote to me this demo: JS native drag and drop
Source code here: https://github.com/dragdemo.html
The opportunity to sort this article is that I am implementing the native drag-and-drop function.
Memo, unknown origin.
page element coordinates and offsets (clientx/pagex/screenx/layerx/offsetwidth/scrollwidth/clientwidth, etc.) related ...
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
