📜  screenX/Y、clientX/Y 和 pageX/Y 之间有什么区别?

📅  最后修改于: 2021-10-29 04:34:42             🧑  作者: Mango

JavaScript 的属性 screenX/Y、clientX/Y 和 pageX/Y 之间的区别通常容易混淆。每个属性都返回一个值,该值指示来自不同参考点的物理像素数。这些属性的区别和用例描述如下:

1. screenX 和 screenY 属性: screenXscreenY是只读属性,分别提供相对于全局坐标或屏幕坐标的水平和垂直坐标。它返回一个表示坐标的双浮点值。

例子:

HTML


  

    

        GeeksforGeeks     

       

The screenX and screenY property

       

        Click on the button to open a new         window with the given parameters         and check the screenX and screenY         property.     

                  


HTML


  

    

  

    

        GeeksforGeeks     

       

The clientX and clientY property

       

        Click anywhere in this rectangle to         see the usage of the clientX and         clientY properties     

          
       

          


HTML


  

    

  

    

        GeeksforGeeks     

       

The pageX and pageY property

       

        Mouse over the rectangle see the         usage of the pageX and pageY         properties     

       
    
           

             


输出:

2. clientX 和 clientY 属性: clientXclientY是只读属性,分别提供内容区域或浏览器窗口的视口内的水平和垂直坐标。

例如,如果用户垂直向下滚动网页并在视口的开头单击,则 clientY 将始终返回 0。它返回一个表示坐标的双浮点值。

例子:

HTML



  

    

  

    

        GeeksforGeeks     

       

The clientX and clientY property

       

        Click anywhere in this rectangle to         see the usage of the clientX and         clientY properties     

          
       

          

输出:

3. pageX 和 pageY 属性: pageXpageY是只读属性,分别返回相对于整个文档左边缘的水平和垂直坐标,即相对于完全渲染的内容区域的左边缘浏览器窗口和 URL 栏正下方。

例如,如果用户向下滚动页面,无论滚动量如何,它仍然会返回相对于页面顶部的坐标。

例子:

HTML



  

    

  

    

        GeeksforGeeks     

       

The pageX and pageY property

       

        Mouse over the rectangle see the         usage of the pageX and pageY         properties     

       
    
           

             

输出: