offsetX,offsetY
offset意為偏移量，是被點(diǎn)擊的元素距左上角為參考原點(diǎn)的長度，而IE、FF和Chrome的參考點(diǎn)有所差異。
Chrome下，offsetX offsetY是包含邊框的，如圖所示。
而IE、FF是不包含邊框的，如果鼠標(biāo)進(jìn)入到border區(qū)域，為返回負(fù)值，如圖所示。
clientX，clientY
設(shè)置或獲取鼠標(biāo)指針位置相對(duì)于瀏覽器視口（內(nèi)容區(qū)域的左上角）的坐標(biāo)，與瀏覽器是否有滾動(dòng)條無關(guān)
相對(duì)于頁面的可見部分的左上角，通過瀏覽器窗口“看到”。
screenX，screenY
鼠標(biāo)指針位置相對(duì)于設(shè)備屏幕的左上角的坐標(biāo)，如果在chrome
devtool以手機(jī)模式查看頁面，獲取的還是相對(duì)于整個(gè)電腦屏幕的左上角的坐標(biāo)
pageX，pageY
相對(duì)于瀏覽器中完全呈現(xiàn)的內(nèi)容區(qū)域的左上角，此參考點(diǎn)位于左上方的網(wǎng)址欄和后退按鈕下方。如果在頁面中嵌入可嵌入的可滾動(dòng)頁面，并且用戶移動(dòng)滾動(dòng)條，則可以實(shí)際改變位置。
坐標(biāo)相對(duì)于整個(gè)渲染頁面的左上角（包括滾動(dòng)隱藏的部分）
- pageX與clientX的區(qū)別
也就是說，當(dāng)瀏覽器沒有滾動(dòng)條的時(shí)候，pageX和clientX是一樣的
以上除了screenX/Y以設(shè)備像素為單位，其他都是以css像素為單位
測(cè)試代碼：
<pre style="overflow: auto; font-family: "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 14px; margin: 0px; padding: 10px; color: rgb(204, 204, 204); background: rgb(45, 45, 45); line-height: 1.6; border-radius: 3px; border: none; width: 380.661px;">document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY,
'offset: ' + e.offsetX+ ',' + e.offsetY)
}, false);
</pre>
參考文章：
1.screenX / Y，clientX / Y和pageX / Y之間有什么區(qū)別? | icessun's Blog
2.區(qū)分event對(duì)象中的[clientX,offsetX,screenX,pageX] - 簡書
