.pageX and .clientX properties

Question

I try to understand, what is difference between e.pageX and e.clientX properties, I have wrote code below and put e.pageX and e.clientX, but nothing happens, nothing difference. Can somebody help me?

Thanks.

<!DOCTYPE html>
<html>
<head>

    <script src="jquery-1.10.2.js"></script>
    <script>

        $(function () {
            $("div").mousemove(function (e) {

                var pageCoord = "( " + e.pageX + ", " + e.pageY + " )";
                $("span").text("Page coords " + pageCoord);
            });
        });



    </script>
    <style>
        div {
            background-color: Yellow; 
            width: 300px;
            height: 300px;
            position:fixed;
        }

        span
        {

          position:fixed;

        }

        body {
            height: 2000px;
            padding:0;
            margin:0;
        }
    </style>
</head>
<body>

    <div></div>
    <span>Coords</span>

</body>
</html>

Works perfectly fine -> **http://jsfiddle.net/Z5Y7A/**, the only reason it wouldn't work would be if the url to jQuery was wrong. — adeneo, Jul 25 '14 at 15:32
possible duplicate of [What is the difference between screenX/Y, clientX/Y and pageX/Y?](http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y) — G.Mendes, Jul 25 '14 at 15:32

score 0 · Answer 1 · answered Jul 25 '14 at 15:40

it works right there: coord

This article can help you to understand the difference pagex vs clientx

$("div").mousemove(function (e) {

      var pageCoord = "( " + e.pageX + ", " + e.pageY + " )";
      $(".page").text("Page coords " + pageCoord);
      var clientCoord = "( " + e.clientX + ", " + e.clientY + " )";
      $(".client").text("client coords " + clientCoord);
 });

.pageX and .clientX properties

1 Answers1