screenX / Y,clientX / Y和pageX / Y之间有什么区别?
来源:互联网 发布:淘宝开店实名未认证 编辑:程序博客网 时间:2024/04/30 07:55
offsetX,offsetY
IE浏览器
特有的事件属性
鼠标点击的位置相当于事件源元素
的位置坐标,以元素盒子模型的内容区域的左上角为参考点
clientX,clientY
设置或获取鼠标指针位置相对于
浏览器视口(内容区域的左上角)
的坐标,与浏览器是否有滚动条无关
相对于页面的可见部分的左上角,通过浏览器窗口“看到”。
相对于viewport
CSS像素的坐标。
screenX,screenY
设置或获取获取鼠标指针位置相对于
物理屏幕的左上角
的坐标,当改变屏幕的分辨率
的时候,坐标会随之改变
相对于screen
设备像素的坐标。
- 对于这个属性
probably never need
pageX,pageY
相对于浏览器中完
全呈现的内容区域
的左上角,此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面,并且用户移动滚动条,则可以实际改变位置。
坐标相对于整个渲染页面的左上角(包括滚动隐藏的部分)
相对于<html>
CSS像素中元素的坐标。
- pageX与clientX的区别
也就是说,当浏览器没有滚动条的时候,pageX和clientX是一样的
document.addEventListener('click', function(e) { console.log( 'page: ' + e.pageX + ',' + e.pageY, 'client: ' + e.clientX + ',' + e.clientY, 'screen: ' + e.screenX + ',' + e.screenY)}, false);
参考资料1
参考资料2
阅读全文
0 0
- screenX / Y,clientX / Y和pageX / Y之间有什么区别?
- 关于对clientX(Y)/pageX(Y)/screenX(Y)的认识
- JS:clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- clientX, clientY,offsetX, offsetY,screenX, screenY, x, y,pageX,pageY的区别
- clientX, clientY,offsetX, offsetY, screenX, screenY, x,y的区别
- js鼠标事件中的clientX/clientY,screenX/screenY,pageX/pageY,offsetX/offsetY,layerX/layerY,x/y
- 【浏览器】event.pageX/Y页面坐标(CSS像素) event.clientX/Y视口Viewport坐标(CSS像素) event.screenX/Y屏幕坐标(屏幕像素)
- Y U V与Y,Cb,Cr有什么区别
- clientX, clientY,offsetX, offsetY,screenX, screenY, x, y 的区别是什么?
- clientX, clientY,offsetX, offsetY,screenX, screenY, x, y 的区别是什么?
- clientX, clientY,offsetX, offsetY,screenX, screenY, x, y
- Y U V与Y,Pb,Pr与 Y, Cb,Cr有什么区别?
- Y U V与Y,Pb,Pr与 Y, Cb,Cr有什么区别?
- Y U V与Y,Pb,Pr与 Y, Cb,Cr有什么区别? .
- Y U V与Y,Pb,Pr与 Y, Cb,Cr有什么区别?([转载]
- Java 包
- npm
- 语义分割相关总结
- 融合大数据能力,解决在存量时代下的力分之困
- Activity 的Window创建过程
- screenX / Y,clientX / Y和pageX / Y之间有什么区别?
- Python批量监控主机内存/CPU利用率/磁盘/网络等信息
- 自定义View实现侧边索引
- 各种激活函数(Activation Function)
- 我的CUDA学习之旅3——图像灰度化、灰度直方图统计
- RecyclerView优雅的添加Header和Footer
- c#中将Html中table表格替换成数组
- 15.1-全栈Java笔记:Java事件模型是什么?事件控制的过程有哪几步??
- 中钰睿泓分享:设计LOGO的思路和流程