clientX clientY

event.clientX
event.clientY

client直譯就是客戶端，客戶端的視窗就是指遊覽器的顯示頁面內容的視窗大小（不包含工具欄、導航欄等等）。

event.clientX、event.clientY就是用來獲取滑鼠距遊覽器顯示視窗的長度。

相容性：IE和主流遊覽器都支援。

offsetX offsetY

event.offsetX
event.offsetY

offset意為偏移量，是被點選的元素距左上角為參考原點的長度，而IE、FF和Chrome的參考點有所差異。

Chrome下，offsetX offsetY是包含邊框的，如圖所示。

而IE、FF是不包含邊框的，如果滑鼠進入到border區域，為返回負值，如圖所示。

相容性：IE9+,chrome,FF都支援此屬性。

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

screenX screenY

event.screenX
event.screenY

screen顧名思義是螢幕，是用來獲取滑鼠點選位置到螢幕顯示器的距離，距離的最大值需根據螢幕解析度的尺寸來計算。

相容性：所有遊覽器都支援此屬性。

pageX pageY

event.pageX
event.pageY

page為頁面的意思，頁面的高度一般情況client遊覽器顯示區域裝不下，所以會出現垂直滾動條。

滑鼠距離頁面初始page原點的長度。

在IE中沒有pageX、pageY，取而代之的是event.x、event.y 。x和y在webkit核心下也實現了，所以火狐不支援x，y。