Screen
The screenX and screenY properties represent the position of the mouse across the entire display, measured from the upper-left corner of the screen (not the browser).
page
The pageX and pageY properties indicate the position of the mouse pointer on this page. The top of the page may be outside the visible area, so even if the mouse pointer is at the same location, the coordinates of the page and client may be different.
client
The clientX and clientY properties represent the position of the mouse pointer in the viewable area of the browser. Even if the user scrolls down the page so that the top of the page is beyond the viewable area, client-side coordinates are not affected.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <div id='body' style="width: 500px;height: 1500px;border: 1px solid red;padding: 0;margin: 0;"></div> <p id='sx'></p> <p id='sy'></p> <p id='px'></p> <p id='py'></p> <p id='cx'></p> <p id='cy'></p> </head> <body> <script type="text/javascript"> var sx = document.getElementById('sx'); var sy = document.getElementById('sy'); pxvar= document.getElementById('px'); var py = document.getElementById('py'); var cx = document.getElementById('cx'); var cy = document.getElementById('cy'); function showPosition(e){ sx.textContent = e.screenX; sy.textContent = e.screenY; px.textContent = e.pageX; py.textContent = e.pageY; cx.textContent = e.clientX; cy.textContent = e.clientY; } document.getElementById('body').addEventListener('mousemove',showPosition,false); </script> </body> </html>