圖解Js event對象offsetX, clientX, pageX, screenX, layerX, x區別

---恢復內容開始---

 

event對象的clientX,clentY、pageX,pageY、screenX,screenY的區別

 event的layerX和layerY的區別

event的x和y的區別

---恢復內容結束---

 

event對象的clientX,clentY、pageX,pageY、screenX,screenY的區別

 event的layerX和layerY的區別

event的x和y的區別

 

 

event.clientX 設置或獲取鼠標指針位置相對於當前窗口的 x 座標，其中客戶區域不包括窗口自身的控件和滾動條。 (可見區域)

event.clientY 設置或獲取鼠標指針位置相對於當前窗口的 y 座標，其中客戶區域不包括窗口自身的控件和滾動條。 （可見區域）

event.offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 座標。 （觸發事件的元素,ie,chrome支持此屬性，ff不支持）

event.offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 座標。 （觸發事件的元素,ie,chrome支持此屬性，ff不支持）

event.screenX 設置或獲取獲取鼠標指針位置相對於用戶屏幕的 x 座標。(用戶屏幕左上角) 

event.screenY 設置或獲取鼠標指針位置相對於用戶屏幕的 y 座標。 (用戶屏幕左上角) 

event.x 設置或獲取鼠標指針位置相對於父文檔的 x 像素座標(亦即相對於當前窗口)。(ff不支持)

event.y 設置或獲取鼠標指針位置相對於父文檔的 y 像素座標(亦即相對於當前窗口)。(ff不支持)

 

event.layerX 鼠標相比較於當前座標系的位置,即若是觸發元素沒有設置絕對定位或相對定位,

以頁面爲參考點,若是有,將改變參考座標系,從觸發元素盒子模型的border區域的左上角爲參考點(未理解)

 

event.laylerY 鼠標相比較於當前座標系的位置,即若是觸發元素沒有設置絕對定位或相對定位,

 以頁面爲參考點,若是有,將改變參考座標系,從觸發元素盒子模型的border區域的左上角爲參考點(未理解)

 

event.pageX 設置或獲取鼠標指針位置相對於當前窗口的 x 座標，其中客戶區域包括窗口自身的控件和滾動條。

 

event.pageY 設置或獲取鼠標指針位置相對於當前窗口的 y 座標，其中客戶區域包括窗口自身的控件和滾動條