pageY/pageX:鼠标位于整个网页页面的顶部和左侧部分的距离(页面)
clientX/clientY:鼠标位于浏览器左侧和顶部的距离(浏览器的大小和位置)
screenY/screenX: 鼠标位于屏幕的上方和左侧的距离(屏幕)
鼠标距离整个页面的距离、和距离可视区的距离有时候是相等的
当页面有被卷去的头部或者左侧的时候,这两个值就不相等了。
由此,我们获取以下等式:
鼠标位于整个页面的距离(pageY/X) = 鼠标位于可视区域的距离(clientY/X) + 页面被卷去的头部或者左侧的距离(scrollTop/Left)
pageY/pageX = event.clientY/clientX + scroll().top/scroll().left
function scroll(){
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
pageX/pageY低版本浏览器(IE67)不支持,所以在此封装一个兼容写法:
(求鼠标位于整个页面的坐标)
document.onclick = function (event) {
//获取事件对象
event = event || window.event;
//鼠标位于整个页面的坐标,兼容IE678
var pagex = event.pageX || event.clientX + scroll().left;
var pageY = event.pageY || event.clientY +scroll().top;
console.log(pagex); //值不带px
console.log(pagey);
}
案例:鼠标跟随