event對象中的座標

圖片描述

視口座標

  • clientX: 相對文檔的水平座標
  • clientY: 相對文檔的垂直座標
  • clientLeft: 返回對象的offsetLeft屬性值和到當前窗口左邊的真實值之間的距離
  • clientWidth: 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。

圖片描述

頁面座標

page爲頁面的意思,頁面的高度通常狀況client遊覽器顯示區域裝不下,因此會出現垂直滾動條。瀏覽器

  • pageX: 鼠標相對於瀏覽器(這裏說的是瀏覽器的有效區域)左上角x軸的座標; 隨滾動條滾動而改變;
  • pageY: 鼠標相對於瀏覽器(這裏說的是瀏覽器的有效區域)左上角y軸的座標; 隨滾動條滾動而改變;

圖片描述

IE不支持

屏幕座標

  • scrollHeight: 獲取對象的滾動高度。
  • scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
  • scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
  • scrollWidth:獲取對象的滾動寬度

相對容器的座標

  • offsetX: 相對容器的水平座標
  • offsetY: 相對容器的垂直座標
  • offsetHeight: 獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
  • offsetLeft: 獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
  • offsetTop: 獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
  • offsetwidth: 是元素相對父元素的偏移寬度。等於border+padding+width

Chrome下,offsetX offsetY是包含邊框的,如圖所示:
圖片描述
IE、FF是不包含邊框的,若是鼠標進入到border區域,爲返回負值,如圖所示:
圖片描述spa

IE9+
相關文章
相關標籤/搜索