clientX and clientY 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>clientX clientY tutorial JavaScript</title>
<link rel="stylesheet" href="css/clientX_clientY_tutorial_JavaScript.css">
</head>
<body>
<div id="box"></div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat aliquid quas quo aliquam quam suscipit modi!
Ipsa porro, iusto sapiente quam sunt delectus earum quibusdam, quos pariatur suscipit quisquam voluptatum quidem
ad eum nihil accusamus nulla animi id! Fugiat beatae, maxime recusandae iure inventore eius modi voluptas in at
tempora. Eveniet natus fuga aperiam voluptatibus modi quibusdam est neque nisi velit. Eligendi molestiae quia
quisquam, praesentium itaque sapiente eius illo nostrum fugit fuga accusantium necessitatibus aperiam corporis
blanditiis laboriosam vitae repellendus nisi repudiandae aut omnis sequi sit quae quasi! Laborum laudantium quas
libero facilis tempore ipsa totam, rerum reiciendis a? Delectus qui inventore ducimus ratione voluptatibus
veniam natus quas perferendis aperiam magnam minima explicabo, pariatur, porro suscipit ullam ab accusantium rem
omnis rerum saepe quod odit? Eos aut dignissimos repellat error libero veniam quia nisi in ullam alias
consequatur exercitationem odio sit nemo modi, tempora nesciunt ut minus eveniet. Saepe, eligendi velit facere
vitae nostrum amet porro. Sed harum doloribus quo mollitia autem laborum dolore, ut consectetur! Consectetur
blanditiis minus mollitia porro rerum adipisci itaque cupiditate in. Praesentium minima fugit adipisci ipsam
doloremque vitae dolorum minus mollitia numquam, quae ratione optio iusto non labore omnis temporibus ipsum
aspernatur nostrum dolorem voluptate magnam sequi accusantium facere nisi. Error perferendis enim sapiente sint.
Explicabo animi ipsa quia magni, obcaecati amet ullam sed accusantium delectus reiciendis placeat quasi nam
temporibus tempora voluptas ipsum nesciunt iste doloribus quam architecto. Excepturi nam officia aperiam, eius
doloribus quisquam fugit alias! Nobis, perspiciatis dolorem quod hic pariatur earum voluptatum dolore magnam
expedita, aut atque veritatis, fugit tempore vel repudiandae aliquid porro! Est amet id error numquam,
exercitationem quae nostrum quis alias culpa aut nam consequuntur impedit beatae eius illo sit blanditiis atque
reprehenderit officiis deserunt corporis. Provident nam labore amet est totam cum, reiciendis fugit aspernatur
possimus magni a ea alias, perferendis maiores id repudiandae ad reprehenderit enim dolore. Officia, blanditiis
odit, deserunt neque hic dignissimos totam architecto voluptate quis, autem dolorem molestiae magni! Iure id
quidem corporis eum tempora non at, sit voluptatem obcaecati ab deserunt omnis repellat eligendi quas, molestias
dolor provident doloremque quod necessitatibus est mollitia! Saepe, inventore. Distinctio amet, iusto ea
temporibus dolorem assumenda ipsa. Molestiae, qui? Consequuntur necessitatibus perspiciatis consequatur beatae
rerum aliquam aspernatur corrupti reiciendis quam placeat! Mollitia dolores illo, aperiam, velit quo iusto
reiciendis dolorem perspiciatis illum labore beatae doloribus ipsa veniam dicta eligendi, cupiditate corrupti!
Consequuntur consequatur eveniet quos fuga assumenda voluptate corporis quaerat hic sequi! Earum, id? Omnis vero
numquam itaque sint sed libero vel velit tempora hic deleniti dolorem facilis earum, voluptate recusandae,
pariatur excepturi. Cum ullam perferendis ea mollitia aliquid ab consequatur, ipsa aspernatur quod unde
repudiandae inventore eveniet nam vel aliquam atque excepturi in, assumenda voluptas! Qui et odit itaque tempora
assumenda quae ad atque incidunt voluptas quas officiis ipsam ipsa, rerum repellat commodi, quis magnam minima
harum? Rem iure perspiciatis placeat accusamus quod veniam praesentium illum voluptate, consectetur corrupti
ipsam! Possimus suscipit minima doloremque optio nobis dolor sapiente, id, ipsam veniam asperiores neque
nesciunt!
</p>
<script>
//For box, when we click on box then only x and y value updated in console
var target = document.querySelector("#box");
target.addEventListener("mousemove", function (e) {
console.clear();
// var x = e.clientX; //Same as var x = e.x;
// var y = e.clientY; //Same as var y = e.y;
var x = e.x;
var y = e.y;
console.log("ClientX : " + x);
console.log("ClientY : " + y);
});
//Below Code is for mouse "click" Event
// var target = document.querySelector("#box");
// target.addEventListener("click", function (e) {
// console.clear();
// var x = e.clientX; //Same as var x = e.x;
// var y = e.clientY; //Same as var y = e.y;
// console.log("ClientX : " + x);
// console.log("ClientY : " + y);
// });
//Below Code is for browser Viewport, when we click on browser Viewport anywhere then x and y value updated in console
// document.addEventListener("mousemove", function (e) {
// console.clear();
// var x = e.clientX;
// var y = e.clientY;
// console.log("ClientX : " + x);
// console.log("ClientY : " + y);
// });
</script>
</body>
</html>
Below File is css/clientX_clientY_tutorial_JavaScript.css File
#box {
width: 600px;
height: 400px;
border: 1px solid #000000;
background: #ffc0cb;
}.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment