<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
border:1px solid black;
width:100%;
height:300px;
}
</style>
</head>
<body>
<div onmousemove="myFunction(event)">
<p>Move cursor anywhere within this div</p>
<p id="point"></p>
</div>
<script>
function myFunction(e){
var xCoords = e.movementX;
var yCoords = e.movementY;
var result = "X coords = "+xCoords+" ,Y coords = "+yCoords;
document.getElementById("point").innerHTML = result;
}
</script>
<p><strong>Note</strong>: Returns the X coordinate of the mouse pointer relative to the position of the last mousemove event.</p> </body>
</html>