screenX/Y,clientX/Y,offsetX/Y和pageX/Y之間有什麼區別?

offsetX,offsetY

offset意爲偏移量,是被點擊的元素距左上角爲參考原點的長度,而IE、FF和Chrome的參考點有所差別。css

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

而IE、FF是不包含邊框的,若是鼠標進入到border區域,爲返回負值,如圖所示。git

clientX,clientY

設置或獲取鼠標指針位置相對於瀏覽器視口(內容區域的左上角)的座標,與瀏覽器是否有滾動條無關
相對於頁面的可見部分的左上角,經過瀏覽器窗口「看到」。github

screenX,screenY

鼠標指針位置相對於設備屏幕的左上角的座標,若是在chrome
devtool以手機模式查看頁面,獲取的仍是相對於整個電腦屏幕的左上角的座標chrome

pageX,pageY

相對於瀏覽器中完全呈現的內容區域的左上角,此參考點位於左上方的網址欄和後退按鈕下方。若是在頁面中嵌入可嵌入的可滾動頁面,而且用戶移動滾動條,則能夠實際改變位置。
座標相對於整個渲染頁面的左上角(包括滾動隱藏的部分)瀏覽器

  • pageX與clientX的區別

pageY和clientY的差別,圖來自網絡

也就是說,當瀏覽器沒有滾動條的時候,pageX和clientX是同樣的網絡

以上除了screenX/Y以設備像素爲單位,其餘都是以css像素爲單位測試

測試代碼:spa

<pre style="overflow: auto; font-family: &quot;Input Mono&quot;, &quot;PT Mono&quot;, 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指針

相關文章
相關標籤/搜索