pageX and pageY tutorial in JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>pageX and pageY tutorial JavaScript</title>
    <link rel="stylesheet" href="css/pageX_pageY_tutorial_JavaScript.css">
</head>

<body>
    <div id="box"></div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore et vitae, libero dolorem ullam autem explicabo
        porro maxime, fugit temporibus repellendus sunt, eos possimus mollitia expedita consequuntur. In amet voluptate
        ullam labore temporibus illo corrupti porro enim molestiae architecto nihil voluptatum quasi commodi, aperiam
        culpa, tempore velit consectetur impedit a sapiente deleniti libero consequuntur asperiores. Nihil distinctio
        pariatur esse autem ad, magnam porro quod obcaecati ea blanditiis fugiat officia similique dolores, reiciendis
        enim hic illum nostrum voluptates expedita earum illo est ipsam. Exercitationem cumque eaque necessitatibus unde
        maiores eligendi vero culpa esse! Dolore veniam nobis eum beatae voluptatibus vitae eveniet possimus sapiente
        repellat iste! Eius culpa a quasi rem dicta, error consectetur amet ipsam accusamus eligendi distinctio ullam
        quod porro. Quis, amet maxime perferendis quae possimus quisquam? Obcaecati similique libero omnis sequi quas,
        necessitatibus minus neque veniam quis et quidem, iste quam id corrupti aliquid laudantium dignissimos hic ex
        quae ad provident a vitae cum! Saepe facere amet temporibus quo ab earum sit distinctio sapiente, vero debitis.
        Facere sequi, tempore id dolore quis totam ea. Iste nisi dolorum eum, sequi corrupti amet quo voluptatem,
        distinctio ab, voluptatum sapiente quidem possimus aperiam. Praesentium ipsum accusantium repudiandae quis
        tempore. Reiciendis voluptatibus, soluta, earum eligendi dignissimos alias vel harum ipsa labore quaerat, odio
        eos sapiente nulla vitae hic quam voluptate quae modi. Rerum veritatis soluta at iste, praesentium distinctio!
        Dolorem nesciunt praesentium perspiciatis ea veniam repellendus minima inventore et quod itaque odit quam
        cupiditate quasi sit maiores nam aperiam labore, voluptatem quo doloribus ratione tempore dolore eveniet cumque.
        Voluptatum iste cum, cumque impedit ducimus sint natus labore eveniet culpa, et, repellat at ipsam. Ducimus
        possimus, quia doloremque porro maxime inventore a aspernatur qui quo odit vel. Enim est suscipit voluptatum quo
        debitis animi, quas alias consectetur repudiandae rem nostrum dicta sapiente magni nam doloribus velit dolore.
        Architecto ullam sit in, voluptatum obcaecati fugit ipsam dolorem expedita nostrum, eveniet, molestiae magni
        corporis! Rem quia quasi temporibus recusandae. Dolorum at nemo repudiandae explicabo perspiciatis eligendi
        ullam rem iure, quaerat vero praesentium natus itaque dolores. Ex deserunt expedita soluta harum. Suscipit,
        repudiandae maiores officiis non corporis consectetur esse magni, nam rem a tempore? Cum amet doloribus corrupti
        aperiam explicabo hic minus velit. Quisquam incidunt fugit ex accusamus? Ipsam sit optio aspernatur
        consequuntur, totam illo. Cumque quisquam, unde sed dolores perferendis vitae voluptates odio sapiente aut,
        molestias dolore ea blanditiis cupiditate quam exercitationem voluptas illum placeat illo voluptate culpa ad
        distinctio delectus. Dolorum beatae eos consequatur obcaecati iste! Nisi, rem repellendus laboriosam itaque,
        deserunt amet fuga perferendis, culpa a quo suscipit quos? Distinctio, tempora architecto provident facilis
        consequatur dolores laudantium explicabo amet voluptas cum porro. Nemo voluptatum quisquam eius sequi quae
        necessitatibus, unde sit illo eveniet perspiciatis ipsa laudantium dolor, facilis est maxime. Nobis omnis
        aperiam placeat. Eos eius quisquam, voluptate ea a facere veritatis beatae molestiae optio sequi illum numquam
        aspernatur aliquam eaque, eveniet, ullam quod laborum voluptates deleniti. Quo dolorem asperiores vitae cum
        dicta, magni est aperiam laborum perspiciatis quaerat unde amet animi hic? Ex enim, dicta repellendus voluptatem
        minima nulla quae quaerat dignissimos, atque possimus voluptas minus perspiciatis fuga pariatur esse animi ad
        nobis. Nam corporis est quibusdam at, sunt nesciunt vero iusto ipsa deleniti, adipisci dicta, saepe numquam
        libero officia porro veritatis? Maiores omnis rerum error illum quo excepturi impedit! Officia amet aspernatur
        soluta et, voluptates aut. Sit impedit at amet cum ratione esse aliquid similique ab, tenetur voluptatem eaque
        quidem quos doloremque est, facere veritatis blanditiis, nihil exercitationem ut. Natus nesciunt ab tempore
        accusamus error! Doloremque neque labore tempora quam rerum? Aperiam ratione quas voluptates quos ducimus fugiat
        commodi facilis nemo minima quod quaerat harum earum soluta sint consectetur natus laudantium explicabo deleniti
        voluptatem cupiditate deserunt, dolorem excepturi! Nisi architecto corrupti deleniti natus voluptatem
        recusandae, vitae labore vel doloremque voluptatibus explicabo minus soluta animi ab. Illo maiores, ut
        architecto aut consequatur voluptatum neque. Aliquam at debitis quibusdam nesciunt! Similique ipsam libero vel
        culpa velit minus sint, quasi nisi rerum fugiat! Impedit eum id minus obcaecati beatae! Enim ut quam aliquid
        dolorem fugit incidunt nulla ratione minima velit earum saepe tempore, est quasi sed repellendus eos veniam
        eveniet quos a tempora quas mollitia. Nemo expedita excepturi eum cum beatae distinctio. Aperiam, tempora nihil.
    </p>
    <script>
        // document.addEventListener("mousemove", function (e) {
        //     console.clear();
        //     var x = e.pageX;
        //     var y = e.pageY;

        //     var x2 = e.clientX;
        //     var y2 = e.clientY;

        //     console.log("pageX : " + x);
        //     console.log("clientX : " + x2);

        //     console.log("pageY : " + y);
        //     console.log("clientY : " + y2);
        // });

        //Below Code is for mouse "click" Event
        document.addEventListener("click", function (e) {
            console.clear();
            var x = e.pageX;
            var y = e.pageY;

            var x2 = e.clientX;
            var y2 = e.clientY;

            console.log("pageX : " + x);
            console.log("clientX : " + x2);

            console.log("pageY : " + y);
            console.log("clientY : " + y2);
        });
    </script>
</body>

</html>




Below File is css/pageX_pageY_tutorial_JavaScript.css File
#box {
    width: 2000px;
    height: 100px;
    border: 1px solid #000000;
    background: #ffc0cb;
}