// 鼠标在当前页面的位置 有兼容性问题 从IE9以后才支持
e = e || window.event;
console.log(e.pageX);
console.log(e.pageY);
// 获取的鼠标在浏览器的可视区域的坐标
console.log(e.clientX);
console.log(e.clientY);
//输出页面滚动出去的距离 有兼容性问题
console.log(document.body.scrollLeft);
console.log(document.body.scrollTop);
有些浏览器 是使用这两个属性来获取的
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollTop);
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
// 获取盒子在页面上的位置
console.log(box.offsetLeft);
console.log(box.offsetTop);
// 获取盒子的宽高(包括内边距和边框)
console.log(box.offsetWidth);
console.log(box.offsetHeight);
pageX--clientX--scrollLeft-offsetLeft--offsetWidth
原文：https://www.cnblogs.com/pxxdbk/p/12642913.html