正确使用pageX、pageY、offsetLeft、offsetTop

获取鼠标位置的时候，遇到一点疑问，然后验证了一下自己的疑惑；

pageX、pageY跟clientX和clientY类似，是相对于浏览器文档的坐标；

offsetLeft、offsetTop获取的是固定定位，也就是说，监听某个选择器内的鼠标位置，这个方法返回的是这个固定范围的左上角离页面左上角的距离坐标；

下面利用一个简单的div来演示一下

div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 200px 200px;
        }

对应的我们想要获取一下当前div元素的上述四个属性值：

document.querySelector('div').onmousemove = (e) => {
    const x = e.pageX;
    const y = e.pageY;
    const x1 = e.target.offsetLeft;
    const y1 = e.target.offsetTop;
    console.log('x='+x);
    console.log('y='+y);
    console.log('x1='+x1);
    console.log('y1='+y1);
}

针对验证我们就可以在页面的控制台看一下，所得到的值；

当我把鼠标放在div元素的左上角顶点时：

然后当我把鼠标放在div内部时：

其实结合使用这两个方法，可以得到当前鼠标的位置与包裹元素侧边的距离，对于有些应用会很有帮助；