在做一些元件和互動時,常常需要動態獲取滑鼠點選位置、元素寬高和元素位置資訊,網上有很多種方法,但自己沒有總結過,不知道各種方法的優缺點和相容性,在此專門的總結一下。
注意:
- 這些關於視覺的內容都被定義在了 W3C 的 CSSOM View Module 模組中,裡面有詳細的介面定義和說明,建議好好研讀。
- 本文主要參照 W3C 文件全面瞭解各個屬性的意義,對應介面文件用圖文的方式直觀顯示各個屬性的含義。但也會有一些自己沒有完全理解和錯誤之處,請各位批評指正,後續會繼續完善。
- 本文涉及到圖片較多,為了獲得最佳體驗,建議使用電腦閱讀。
閱讀 W3C 規範的總結
Extensions to the Window Interface
圖片糾錯: scrollX = pageXOffset:表示滾動條在X軸方向上滾動的距離;scrollY = pageYOffset:表示滾動條在Y軸方向上滾動的距離
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()返回物件的屬性
Extensions to the MouseEvent Interface
希望對你有幫助,歡迎分享和批評指正~~~~~