獲取鼠標在盒子中的坐標 · JavaScript

## 獲取在盒子中的位置 ![](https://box.kancloud.cn/e1bd4fb6ca22657edc0a918a599f74dd_604x424.png) ``` <style> * { margin: 0; } #box { margin-top: 100px; margin-left: 300px; width: 400px; height: 400px; background-color: skyblue; } </style> </head> <body> <div id="box"> </div> <script> var box = document.getElementById('box'); box.onclick = function (e) { //獲取盒子在頁面上的位置 var offsetLeft = this.offsetLeft; //盒子距離左邊的距離 var offsetTop = this.offsetTop//盒子距離上面的距離 e = e || window.event; //獲取鼠標在盒子中的位置 = 鼠標的坐標 - 盒子的坐標 var x = e.pageX - offsetLeft; var y = e.pageY - offsetTop; console.log(x, y); } </script> ``` ## 處理頁面滾動出去的距離兼容性 ``` function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop, } } ``` ## 處理pageX和pageY的兼容性 ``` function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY, } } ```