关于JS DOM中侦听事件获取的各种坐标简单梳理

最新推荐文章于 2023-12-24 21:07:47 发布

「已注销」

最新推荐文章于 2023-12-24 21:07:47 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/zhangtianyu5177/article/details/80285368

本文梳理了DOM中鼠标点击事件监听获取的各种坐标属性，包括e.x/e.y（相对于视口）、e.pageX/e.pageY（相对于文档）、e.screenX/e.screenY（相对于屏幕）以及e.offsetX/e.offsetY（相对于事件源元素）。通过对不同坐标属性的举例说明，帮助理解它们在不同场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单梳理一下DOM中的各种宽、高。首先我们给全局DOM加一个鼠标点击监听事件，用于监听我们要观察的宽高，代码如下：

window.addEventListener("mousedown",demo);
    function demo(e){
        e=e || window.event;
        console.log("我们观察的宽高值");
    }

1.e.x , e.y

获取的是相对于屏幕可见区域的坐标，如果存在滚动条，那么隐藏的那部分是被忽略的，也就是说如果网页很长，出现了滚动条时，鼠标放在如图位置点击鼠标，随后鼠标不动，滚动滚轮，再次点击，两次都是(0,0)。等同于div.clientX 与 div.clientY 这样获取。

2.e.pageX , e.pageY（IE不支持）

获取的是相对于文档的坐标，左上角为(0,0)，左、上为负，右、下为正。如果网页很长，出现了滚动条，我们进行如下操作：

鼠标放在图示位置点击一次，输出(0,0)。
保持鼠标不动，滚动鼠标滚轮，鼠标再次点击，输出(0,167)。

所以可见pageX 和 pageY获取的是相对文档高度，可以理解为距body最左上角的位值。

3.e.screenX , e.screenY

最低0.47元/天解锁文章

200万优质内容无限畅学