- MouseEvent的clientX、offsetX、pageX
- 图解clientX、offsetX、pageX的区别
- 一张图轻松搞懂javascript event对象的client
- 图解Js event对象offsetX, clientX, pa
- screenX/Y, clientX/Y, pageX/Y
- clientX,offsetX,screenX,pageX
- clientX、offsetX、screenX、pageX区别
- pageX、clientX、screenX、offsetX、Sc
- screenX、clientX、pageX, offsetX；o
- clientX、screenX、pageX、offsetX、pa
因为X和Y道理一样，所以本文只说X
| 属性 | 说明 |
|---|---|
| screenX | 计算机屏幕左上角为原点，定位x轴坐标 |
| clientX | 以浏览器视口左上顶角为原点，定位 x 轴坐标 |
| pageX | 以Document 对象（即文本窗口）左上角为原点，定位x轴坐标 |
| offsetX | 以当前事件的目标对象左上角为原点，定位x轴坐标 |
| layerX | 以定位祖先（如果没有，则为Document对象）左上角为原点，定位x轴坐标 |
screenX
这个就厉害了，它把浏览器的自身面积也考虑进去了，你点击浏览器内容区域的顶部时，clientY可能只有几像素，但是screenY会有几十、几百像素，因为浏览器顶部有标题栏、地址栏、收藏夹栏等等。因此一般用不到。
clientX
鼠标点击的位置相对于浏览器左上顶角的坐标，也就是说，跟页面内容无关，你怎么修改、滚动页面内容，只要你鼠标不挪动，那么clientX永远是不变的。
pageX
鼠标点击的位置跟网页左上角的偏移坐标，也就是说，比如一个图片离网页顶部1000像素，那么你点击这个图片，得到的pageY就应该是1000像素再多一点。无论你怎么滚动页面，只要你去点那个图片，那么pageY就一定是1000像素再多一点。
offsetX
比如你点击一个按钮，那么offsetX就是按钮左上角跟鼠标点击位置的偏移坐标。
layerX
比如你点击了一个图片，那么系统会去找图片的定位祖先，找到之后，从祖先左上角到你鼠标点击的位置的距离，就是layerX。
鼠标拖拽效果使用哪个属性来计算？
应该使用clientX和clientY来计算。
鼠标mousedown的时候，保存下来当前鼠标相对于浏览器视口的坐标。
鼠标mousemove的时候，得到新的坐标，与原始坐标相减，得到位移量。
然后让移动的元素的top、left偏移这个量，即可。
网友评论