What is the difference between screenX/Y, clientX/Y and pageX/Y ?

In this article, we will see the difference between screenX/Y, clientX/Y, and pageX/Y. The difference between properties screenX/Y, clientX/Y, and pageX/Y of JavaScript are commonly confused. Each of the properties returns a value that indicates the number of physical pixels from different reference points. The differences and the use case of these properties are described below:

The screenX and screenY property: The screenX and screenY are read-only properties that provide horizontal and vertical coordinates respectively relative to the global, or screen coordinates. It returns a double floating-point value denoting the coordinate.

Example: This example shows the basic use of the screenX and screenY properties in Javascript.

HTML

<h1 style="color: green;">
    GeeksforGeeks
</h1>

<h3>The screenX and screenY property</h3>

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

<button onclick="getScreenXY()">
    Open Window
</button>

<script>
    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>"
        );
    }
</script>

Output:

The clientX and clientY property: The clientX and clientY are read-only properties that provide the horizontal and vertical coordinates respectively within the content area, or the viewport of the browser window.

For example, if the user scrolls down the webpage vertically and clicks at the start of the viewport, then clientY will always return 0. It returns a double floating-point value denoting the coordinate.

Example: This example shows the basic use of the clientX and clientY properties in Javascript.

HTML

<h1 style="color: green;">
    GeeksforGeeks
</h1>

<h3>The clientX and clientY property</h3>

<p>
    Click anywhere in this rectangle to
    see the usage of the clientX and
    clientY properties
</p>


<div style="width: 300px;
                height: 200px;
                border: 1px solid black;" onclick="showCoordinates(event)">

</div>

<p id="display"></p>

<script>
    function showCoordinates(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coordinates = "clientX: " +
            x + ", clientY: " + y;
        document.getElementById("display")
            .innerHTML = coordinates;
    }
</script>

Output:

The pageX and pageY property: The pageX and pageY are read-only properties that return the horizontal and vertical coordinates respectively relative to the left edge of the entire document, that is, relative to the left edge of the fully rendered content area in the browser window and just below the URL bar.

For example, if the user scrolls down the page, it would still return the coordinates relative to the top of the page regardless of the amount of scroll.

Example: This example shows the basic use of the pageX and pageY properties in Javascript.

HTML

<h1 style="color: green;">
    GeeksforGeeks
</h1>

<h3>The pageX and pageY property</h3>

<p>
    Mouse over the rectangle see the
    usage of the pageX and pageY
    properties
</p>

<div style="width: 300px;
            height: 200px;
            border: 1px solid black;"
            onmousemove="showCoordinates(event)"
            onmouseout="clearCoordinates()">
</div>

<p id="display"></p>


<script>
    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 = "";
    }
</script>

Output: