页面/元素/鼠标坐标位置相关总结

一.获取鼠标位置

• 获取鼠标移动事件的event对象
• 通过对象可获取当前鼠标的x，y坐标

let x, y;

function mouseMove(e) {
    e = e || window.event;
    if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;

        console.log(`鼠标横坐标：${x}px`);
        console.log(`鼠标纵坐标：${y}px`);
    }
}

document.onmousemove = mouseMove;

二.文档对象

• 网页可见区域宽： document.body.clientWidth
• 网页可见区域高： document.body.clientHeight
• 网页可见区域宽： document.body.offsetWidth (包括边线的宽)
• 网页可见区域高： document.body.offsetHeight (包括边线的高)
• 网页正文全文宽： document.body.scrollWidth
• 网页正文全文高： document.body.scrollHeight
• 网页被卷去的高： document.body.scrollTop
• 网页被卷去的左： document.body.scrollLeft
• 网页正文部分上： window.screenTop
• 网页正文部分左： window.screenLeft
• 屏幕分辨率的高： window.screen.height
• 屏幕分辨率的宽： window.screen.width
• 屏幕可用工作区高度： window.screen.availHeight
• 屏幕可用工作区宽度： window.screen.availWidth

三.window对象

• window.screen.width;//屏幕分辨率的宽
• window.screen.availHeight;//屏幕可用工作区的高
• window.screen.availWidth;//屏幕可用工作区的高
• window.innerWidth;//浏览器可视区域的内宽度，不包含浏览器边框，但包含滚动条
• window.innerHeight;//浏览器可视区域的内高度

四.页面对象相关

1.物理空间

• 包含border,padding和滚动条宽度
• 页面元素高度 element.offsetHeight
• 页面元素宽度 element.offsetWeight

2.完整空间

• 容器大小，包含不可见部分，包含padding
• 容器总高 scrollHeight
• 容器总宽 scrollWeight

3.可视区域

• 包括内容和 padding，如果有滚动条，还需要减去滚动条的宽度
• 可视高度 clientHeight
• 可视宽度 clientWeight

4.完整坐标宽高对象

• element.getBoundingClientRect()
• 返回元素的宽高以及基于页面上下左右的距离

eg.

DOMRect {
    bottom:-1902.25
    height:182
    left:350
    right:575
    top:-2084.25
    width:225
    x:350
    y:-2084.25
}

很基础的知识点，但是每次使用都需要Google，花点时间自己总结下来，慢慢积累…

END