获取鼠标位置的时候,遇到一点疑问,然后验证了一下自己的疑惑;
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内部时:
其实结合使用这两个方法,可以得到当前鼠标的位置与包裹元素侧边的距离,对于有些应用会很有帮助;