offset意爲偏移量,是被點擊的元素距左上角爲參考原點的長度,而IE、FF和Chrome的參考點有所差別。css
Chrome下,offsetX offsetY是包含邊框的,如圖所示。html
而IE、FF是不包含邊框的,若是鼠標進入到border區域,爲返回負值,如圖所示。git
設置或獲取鼠標指針位置相對於瀏覽器視口(內容區域的左上角)
的座標,與瀏覽器是否有滾動條無關
相對於頁面的可見部分的左上角,經過瀏覽器窗口「看到」。github
鼠標指針位置相對於設備屏幕的左上角
的座標,若是在chrome
devtool以手機模式查看頁面,獲取的仍是相對於整個電腦屏幕的左上角的座標chrome
相對於瀏覽器中完全呈現的內容區域
的左上角,此參考點位於左上方的網址欄和後退按鈕下方。若是在頁面中嵌入可嵌入的可滾動頁面,而且用戶移動滾動條,則能夠實際改變位置。
座標相對於整個渲染頁面的左上角(包括滾動隱藏的部分)瀏覽器
也就是說,當瀏覽器沒有滾動條的時候,pageX和clientX是同樣的網絡
以上除了screenX/Y以設備像素爲單位,其餘都是以css像素爲單位測試
測試代碼:spa
<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之間有什麼區別? | icessun's Blog
2.區分event對象中的clientX,offsetX,screenX,pageX指針