screenX / Y，clientX / Y和pageX / Y之间有什么区别？

来源：互联网发布：淘宝开店实名未认证编辑：程序博客网时间：2024/04/30 07:55

图|网络

offsetX，offsetY

IE浏览器特有的事件属性
鼠标点击的位置相当于事件源元素的位置坐标，以元素盒子模型的内容区域的左上角为参考点

clientX，clientY

设置或获取鼠标指针位置相对于浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关
相对于页面的可见部分的左上角，通过浏览器窗口“看到”。
相对于viewportCSS像素的坐标。

screenX，screenY

设置或获取获取鼠标指针位置相对于物理屏幕的左上角的坐标，当改变屏幕的分辨率的时候，坐标会随之改变
相对于screen设备像素的坐标。

对于这个属性probably never need

pageX，pageY

相对于浏览器中完全呈现的内容区域的左上角，此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面，并且用户移动滚动条，则可以实际改变位置。
坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分）
相对于<html>CSS像素中元素的坐标。

pageX与clientX的区别

pageY和clientY的差异，图来自网络

也就是说，当浏览器没有滚动条的时候，pageX和clientX是一样的

document.addEventListener('click', function(e) {  console.log(    'page: ' + e.pageX + ',' + e.pageY,    'client: ' + e.clientX + ',' + e.clientY,    'screen: ' + e.screenX + ',' + e.screenY)}, false);

参考资料1
参考资料2

阅读全文

0 0