JavaScript Mouse Position (ClientX and ClientY)

Get the mouse coordinates, the clientX and clientY of event objects shows the horizontal and vertical coordinate value. Because of the events objects would shows differently in different browser such as Internet Explorer, Firefox, Goodgle Chrome, etc. ClientX and ClientY help us to find a solution for the event object to work in any browser.

<!DOCTYPE html>
<hmtl>
<head>
<title>EXAMPLE OF HOW IT WORKS ON YOUR HTML</title>
<script type="text/javascript">
window.onload = function ()
{
window.onclick = function (e)
{
var evt = window.event || e;
document.getElementById("result").innerHTML = "Mouse position (" + evt.client + "," + evt.clientY +")";
}
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
view raw jsmouse hosted with ❤ by GitHub

The end result is whenever you click on the screen of your browser it will show the x and y coordinates

Put an image to see the difference

<!DOCTYPE html>
<hmtl>
<head>
<title>EXAMPLE OF HOW IT WORKS ON YOUR HTML</title>
<script type="text/javascript">
window.onload = function ()
{
window.onclick = function (e)
{
var evt = window.event || e;
document.getElementById("result").innerHTML = "Mouse position (" + evt.clientX + "," + evt.clientY +")";
document.getElementById("myImage").style.left = evt.clientX + "px";
document.getElementById("myImage").style.top = evt.clientY + "px";
}
}
</script>
</head>
<body>
<div id="result"></div>
<img
id="myImage"
src="image2.jpg"
style="position: absolute; top:100px; left:100px; width: 120px; height: 120px;" />
</body>
</html>
view raw jsmouse hosted with ❤ by GitHub

Result will show different coordinates and also the image will move as you click the mouse on the screen