浏览器上的坐标体系相关概念(客户区,页面,屏幕)
平时如果我们想要通过鼠标点击元素上的某个区域的时候,例如canvas中的某个点时,就需要计算具体的坐标点。鼠标事件提供了三组坐标,下面我们讲解一下它们之间的关系。
- 第一组:(clientx,clienty),这组是视口坐标,那什么是视口区?
下面界面是一个简单的页面,滚动条是针对整个页面的 ,下图中的红色方框的区域就是视口区。红色区域的左上角,就是视口区的(0,0)点, 。
面这个页面中有两个iframe, 每个iframe 都有它自己的滚动条,我们点击右边frame 的红色文字,弹出的(clientx,clienty) 是 (10,27 ) 这个是相对右边iframe 的起始点的左边,这时的视口就是右边的iframe(红色框).
所以使用clientx,clienty 进行计算的时候需要考虑当前的视口是哪个,是否有嵌套关系,如果有嵌套关系,计算时需要考虑嵌套关系的影响。
- 第二组坐标是(pagex,pagey) ,这组是页面坐标,还以上图为例。对于上面的页面,因为页面有向下滚动。所以pagex,pagey 和 clientx,clienty是不相等的。
pagex,pagey 也可以通过clientx,clienty 结合 scrollleft,scrolltop 获得
针对上面第一张图:
pagex = document.documentelement.scrollleft + clientx;
pagey = document.documentelement.scrolltop + clienty;
如果页面比较复杂,有多个可滚动容器,则对于active 的可滚动容器
pagex = scrollleft + clientx
pagey = scrolltop + clienty
其中,pagex,pagey,scrollleft,scrolltop,clientx,clienty 都是相对active可滚动容器的原点的坐标。
- 第三组坐标是(screenx,screeny), 这组坐标是屏幕坐标,指页面上的元素相对于屏幕左上角的坐标。
上一篇: 分治与递归-找k个临近中位数的数
下一篇: MySQL---优化是否存在?