鼠标的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;
}