原生js獲取滑鼠座標方法全面講解:
clientx/y,pagex/y,offsetx/y,layerx/y,screenx/y
一、關於js滑鼠事件綜合各大瀏覽器能獲取到座標的屬性總共以下五種:
event.clientx/y
event.pagex/y
event.offsetx/y
event.layerx/y
event.screenx/y
二、分別講解如下：
clientx/y:
clientx/y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變
相容性：所有瀏覽器均支援
pagex/y:
pagex/y獲取到的是觸發點相對文件區域左上角距離，會隨著頁面滾動而改變
相容性：除ie6/7/8不支援外，其餘瀏覽器均支援
offsetx/y:
offsetx/y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不同瀏覽器中有區別，其中在ie中以內容區左上角為基準點不包括邊框，如果觸發點在邊框上會返回負值，而chrome中以邊框左上角為基準點。
相容性：ie所有版本，chrome，safari均完美支援，firefox不支援
layerx/y:
layerx/y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetx/y相同，這個變數就是firefox用來替代offsetx/y的，基準點為邊框左上角，但是有個條件就是，被觸發的dom需要設定為position:relative或者position:absolute，否則會返回相對html文件區域左上角的距離
相容性：ie6/7/8不支援，opera不支援，ie9/10和chrome、safari均支援
screenx/y:
screenx/y獲取到的是觸發點相對顯示器螢幕左上角的距離，不隨頁面滾動而改變
相容性：所有瀏覽器均支援
js如何獲取滑鼠當前座標？
在進行業務功能實現時，有時需要根據滑鼠當前位置進行一定的操作。那麼該如何獲取到滑鼠當前的位置呢？經過一番嘗試與查詢，找到乙個比較便捷的方法，在此進行記錄 let sh window.pageyoffset document.documentelement.scrolltop document.bod...
JS 常用位置 和 尺寸 獲取 滑鼠的座標
innerwidth 文件顯示區域 寬 innerheight 文件顯示區域 高 outwidth 瀏覽器整個寬 outheight 瀏覽器整個高 screenx screenleft 瀏覽器裡螢幕左上角距離的x座標 screeny screentop 瀏覽器裡螢幕左上角距離的y座標 尺寸 elem...
原生JS獲取DOM元素的方法
js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...