获取鼠标在盒子中的坐标 · 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, } } ```