Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）

最新推荐文章于 2021-10-25 21:19:37 发布

『业精于勤』

最新推荐文章于 2021-10-25 21:19:37 发布

阅读量1.5k

点赞数

分类专栏： JS 文章标签： event对象

本文链接：https://blog.csdn.net/qq_39816673/article/details/106018053

版权

JS 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

简介

因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，可立马删除）：
在这里插入图片描述
针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~

event.x

event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码

<body>
    <div>
        外
        <div  id="content" style="margin-top:50px;padding:15px;height:20px">
            内
        </div>
    </div>
</body>

这种情况，event.x在谷歌和IE结果是一样的，但是如果在外层div加上定位

<body>
    <div style="position:relative">
        外
        <div  id="content" style="margin-top:50px;padding:15px;height:20px">
            内
        </div>
    </div>
</body>

这时候，谷歌还是不变的，但是IE就不同了，它的event.x返回的是点击位置到外层div的距离，如下图所示：
在这里插入图片描述
具体原因和处理方案请看我的这篇博客

event.layerX

layerX/Y获取到的是触专发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离
在这里插入图片描述