js中event对象的offsetX、 clientX、pageX、screenX、 layerX、x之间的区别

最新推荐文章于 2025-06-22 03:18:02 发布

原创最新推荐文章于 2025-06-22 03:18:02 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js

Javascript 专栏收录该内容

21 篇文章

订阅专栏

本文通过图解方式详细解析了前端开发中常用的鼠标事件属性，包括event.offsetX、event.clientX、event.pageX、event.screenX等，并提供了测试代码及浏览器兼容性说明。

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

我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量，但是有的时候有搞不清楚他们之间的区别，甚至被搞得一头雾水。
这里给大家总结了一下他们之间的区别，而且使用图片给大家清晰的展示出来。

**图片是从其他大神那里字节拿过来用的，这是大神的原博客 [江波的博客](http://www.cnblogs.com/jiangxiaobo/)
**

一、测试代码：

window.onload=function(e){
    var box=document.getElementById("box");
    box.onclick=function(e){
        console.log(e.clientX,e.clientY);
        console.log(e.offsetX,e.offsetY);
        console.log(e.pageX,e.pageY);
        console.log(e.screenX,e.screenY);
        console.log(e.layerX,e.layerY);
    }
}