我們先了解一下這三個概念：
offsetXY:是該事件發生的盒子模型里的坐標，與滾動條無關。
clientXY：是整個瀏覽器可用部分里的坐標，與滾動條無關。
pageXY：是整個網頁里的坐標，與滾動條有關。
下面是個簡單的列子（只寫了X坐標效果）:
設置一個簡單的紅色背景的div，id=box，還有一個深色背景的div，id=sizeBox,鼠標點擊之后以上各值顯示在這里面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="CSS/demo.css" rel="stylesheet" /> <script src="JS/jquery-3.1.0.min.js"></script> <script > $(function () { $("body").click(function (even) { $("#sizeBox").html("clientX:" + even.clientX + "\n" + "offsetX:" + even.offsetX + "\n" + "pageX:" + even.pageX); }) }) </script> </head> <body> <div id="box"></div> <div id="sizeBox"></div> </body> </html>
效果圖：
如果隨意點擊body標簽內的任意白色地方，clientXY，offsetXY，pageXY都是相同的。
然而，當我們把鼠標點擊在任意div盒子里面的時候，offsetx卻發生可改變，其余兩個都沒變
這是顯而易見的，offsetY是以這個div的盒子模型（父元素）的左上角為原點的，pageX、
clientX是以瀏覽器可視區域的左上角為原點的；
而pageX和clientX的區別在於滾動條，一般理解就是pageX在頁面隨滾動條拉長之后值會跟着增大，而clientX則不會，也就是說需要拖動滾動條才能看到的區域不考慮的。