当前位置： 移动技术网 > IT编程>网页制作>CSS > 浏览器上的坐标体系相关概念(客户区，页面，屏幕)

浏览器上的坐标体系相关概念(客户区，页面，屏幕)

2018年12月12日  | 移动技术网IT编程  | 我要评论

    平时如果我们想要通过鼠标点击元素上的某个区域的时候，例如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), 这组坐标是屏幕坐标，指页面上的元素相对于屏幕左上角的坐标。

          

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网