鼠標的screen,client和page三個重要座標系列

鼠標的screen,client和page三個重要座標系列

作爲一名前端開發人員,我們有時候需要獲取鼠標在頁面上的點擊位置,我們都知道鼠標的點擊事件中有screen,client和page三個系列的座標,那馬我們下面就來具體分析一下:

三個重要座標.js:

document.onclick = function (event) {
	var event = event || window.event;
	console.log('screen: ' + event.screenX + '--' + event.screenY);
	console.log('client: ' + event.clientX + '--' + event.clientY);
	console.log('page: ' + event.pageX + '--' + event.pageY);
}

說明:
@ screenX/Y: 是鼠標在屏幕中的座標;
由於我的電腦拓展了一臺顯示器,然後是在顯示器上打開的瀏覽器,所以是screenX = 1600(電腦分辨率設置寬度)+clientX/pageX;
@ clientX/Y: 鼠標在窗口中的座標;
即上圖中相對於窗口視口中綠色箭頭標註的位置.
@ pageX/Y: 鼠標在頁面中的座標;
因爲現在的整個窗口展示的是整個頁面,所以page系列的座標是與client系列的座標是相同的.
如果:
我們給頁面的body加個高度,讓頁面出現滾動條

body {
	height: 3000px;
}

頁面右邊就會出現滾動條.然後:

說明:
@ pageY = clientY + window.scrollY(頁面頂部滾出去的距離);
我們打印一下scrollY,驗證一下:

pageY(995) = clientY(298) + window.scrollY(697);
pageX也是同理.
所以,當我們要獲取鼠標在頁面上的點擊位置時,可以使用下面代碼:

document.onclick = function (event) {
	var event = event || window.event;
	// IE6,7,8不支持pageX/Y,但是會支持clientX/Y
	var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
	var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
}