在做一些元件和互動時,常常需要動態獲取滑鼠點選位置、元素寬高和元素位置資訊,網上有很多種方法,但自己沒有總結過,不知道各種方法的優缺點和相容性,在此專門的總結一下。
注意:
- 這些關於視覺的內容都被定義在了 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


希望對你有幫助,歡迎分享和批評指正~~~~~