首页 > 代码库 > 深入了解clientXY，offsetXY，pageXY的区别
深入了解clientXY，offsetXY，pageXY的区别
我们先了解一下这三个概念：
offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientXY：是整个浏览器可用部分里的坐标，与滚动条无关。
pageXY：是整个网页里的坐标，与滚动条有关。
下面是个简单的列子（只写了X坐标效果）:
设置一个简单的红色背景的div，id=box，还有一个深色背景的div，id=sizeBox,鼠标点击之后以上各值显示在这里面
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="CSS/demo.css" rel="stylesheet" /> <script src="JS/jquery-3.1.0.min.js"></script> <script > $(function () { $("body").click(function (even) { $("#sizeBox").html("clientX:" + even.clientX + "\n" + "offsetX:" + even.offsetX + "\n" + "pageX:" + even.pageX); }) }) </script></head><body> <div id="box"></div> <div id="sizeBox"></div></body></html>
效果图：
如果随意点击body标签内的任意白色地方，clientXY，offsetXY，pageXY都是相同的。
然而，当我们把鼠标点击在任意div盒子里面的时候，offsetx却发生可改变，其余两个都没变
这是显而易见的，offsetY是以这个div的盒子模型（父元素）的左上角为原点的，pageX、
clientX是以浏览器可视区域的左上角为原点的；
而pageX和clientX的区别在于滚动条，一般理解就是pageX在页面随滚动条拉长之后值会跟着增大，而clientX则不会，也就是说需要拖动滚动条才能看到的区域不考虑的。
深入了解clientXY，offsetXY，pageXY的区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。