屏幕
screenX和screenY属性表示鼠标在整个显示屏的位置，从屏幕（而不是浏览器）的左上角开始计算的。
页面
pageX和pageY属性表示鼠标指针在这个页面的位置。页面的顶部可能在可见区域之外，所以即使鼠标指针位于同一位置，页面和客户端的坐标也可能不同。
客户端
clientX和clientY属性表示鼠标指针在浏览器可视区域中的位置。即使用户将页面向下滚动，使得页面顶部超出了可视区域，也不会影响客户端坐标。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <div id='body' style=" 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'); var px = 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>