pageX,clientX区别

pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。
特别说明：IE不支持！

//-----------------------------------------------------------

clientX/clientY：
事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。
特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。

总结：

如果不考虑兼容性问题，做拖拽或者图片跟着手表飞等案例用page比client效果好

转载于:https://www.cnblogs.com/2016-zy-3258/p/6683812.html

pageX,clientX区别相关推荐

clientX、offsetX、screenX、pageX的区别
一.概念总结 1.event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性.cl ...
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pa ...
pageX,clientX,offsetLeft,scrollLeft的区别
pageX,clientX,offsetLeft,scrollLeft的区别 1.pageX / pageY pageX / pageY的值为鼠标相对于document的距离,即网页左上角的位置 2. ...
pageX clientX offsetX之间的区别
鼠标在页面中的定位有pageX pageY clientX clientY offsetX offsetY等,总是分不清楚这几个之间有什么区别,写一篇文章作为备忘录 clientX和clie ...
javascript 中 x offsetX clientX screenX pageX的区别
在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...
pageX,clientX,offsetX,layerX的区别
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...
offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.
背景最近在做一款基于canvas的画板插件,开发过程中的画笔功能就会使用很多关于鼠标位置的属性:screenX/Y,clientX/Y,pageX/Y,offsetX/Y,以及节点offsetLef ...
screenX clientX pageX的区别
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scree ...
pageX,clientX,screenX,offsetX区别
pageX/pageY: 鼠标相对于整个页面的X/Y坐标. 注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了. ...

pageX,clientX区别

pageX,clientX区别相关推荐

最新文章

热门文章