When doing some components and interactions, it is often necessary to dynamically obtain the mouse click position, element width and height and element location information. There are many methods on the Internet, but THEY have not summarized themselves, and do not know the advantages and disadvantages and compatibility of various methods. Here is a special summary.

Note:

  1. These visual aspects are defined in the W3C CSSOM View Module, which provides detailed interface definitions and instructions.
  2. This paper mainly refers to the W3C document to fully understand the meaning of each attribute, corresponding interface document with graphic visual display of the meaning of each attribute. However, there will also be some mistakes and mistakes that I do not fully understand, please criticize and correct, and I will continue to improve in the future.
  3. This article involves many pictures, in order to get the best experience, it is recommended to use a computer to read.

Read the summary of the W3C specification

Extensions to the Window Interface

ScrollX = pageXOffset: indicates the scrolling distance of the scroll bar in the X-axis direction; ScrollY = pageYOffset: indicates the scrolling distance of the scroll bar in the Y direction

The Screen Interface

Extensions to the Document Interface

Extensions to the Element Interface

Extensions to the HTMLElement Interface

Extensions to the HTMLImageElement Interface

Extensions to the Range Interface

GetBoundingClientRect () returns the property of the object

Extensions to the MouseEvent Interface

Hope to help you, welcome to share and criticism ~~~~~

reference

  • CSSOM View Module
  • CSSOM View Module
  • W3C DOM Core
  • UIEvent
  • ScrollTop, offsetTop, scrollLeft, offsetLeft……
  • MDN:HTMLElement.offsetParent
  • In-depth understanding of locating parent offsetParent and offset size
  • OffsetParent algorithm analysis