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

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

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

例子：

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.
    
  
    
        Open Window
    
  
    
        function getScreenXY() {
  
            // Open a new window with the
            // left at 400 and the top at 200
            var newWindow = window.open("", "newWindow",
                "left=400, top=200, width=450, height=300");
  
            newWindow.document.write(
                "<p> This is the example window to" +
                " show the usage of screenX/Y");
  
            // Show the screenX and screenY property
            newWindow.document.write(
                "<br>screenX: " + newWindow.screenX
            );
            newWindow.document.write(
                "<br>screenY: " + newWindow.screenY + "</p>"
            );
        }
    

  

输出：

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

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

例子：

HTML

  

    
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    

  

    
        GeeksforGeeks
    
  
    The clientX and clientY property
  
    
        Click anywhere in this rectangle to
        see the usage of the clientX and
        clientY properties
    
  
  
    
  
    
  
    
        function showCoordinates(event) {
            var x = event.clientX;
            var y = event.clientY;
            var coordinates = "clientX: " +
                x + ", clientY: " + y;
            document.getElementById("display")
                .innerHTML = coordinates;
        }
    

  

输出：

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

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

例子：

HTML

  

    
        div {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
    

  

    
        GeeksforGeeks
    
  
    The pageX and pageY property
  
    
        Mouse over the rectangle see the
        usage of the pageX and pageY
        properties
    
  
    
    
      
    
  
  
    
        function showCoordinates(event) {
            var x = event.pageX;
            var y = event.pageY;
            var coordinates = "pageX: " +
                x + ", pageY: " + y;
            document.getElementById("display")
                .innerHTML = coordinates;
        }
  
        function clearCoordinates() {
            document.getElementById("display")
                .innerHTML = "";
        }
    

  

输出：