ClientX and clientY for getting client vertical and horizontal coordinate of click event

WE can get horizontal and vertical coordinate of mouse points by using clientX and clientY events. Top left corner is known as 0, 0 . This mean vertical zero is top most point and horizontal zero is left most point. Here is the syntax

event.clientX;

For Y coordinate it is

event.clientY

We will try to develop one script in which we will collect the user click position on the screen. This we can do by keeping onClick event of body tag. This will trigger one function and the function will display the value inside a div tag. Here is the code and before that

DEMO of X & Y coordinates of mouse click

<html>
<head>
<title>Demo of clientX and ClientY in JavaScript</title>

<script langauge="javascript">
function return_coor(event){
document.getElementById("d1").innerHTML="X:"+event.clientX + "<br>Y:" + event.clientY;
}
</script>
</head>
<body onClick="return_coor(event)">
<div id=d1></div>.
<br><br><br><br><br><br><br><br><br><br>
<div id='my_page2' style="position:absolute;right: 200px;top:10px;background-color: #cccc33;
width: 50px; height : 50px; color: white; border: #0000cc 1px dashed;"> ** </div>
<br><br><br><br><br>
Return to <a href=clientx-clienty.php>clientX and clientY tutorial</a>
<br><br>
</body>
</html>

Using the above concept let us try to develop one Virtual Keyboard

Subscribe to our YouTube Channel here

clientX clientY

event.clientX;

event.clientY

Subscribe