JS - 获取鼠标的位置坐标(相对于元素、屏幕、窗口、整个文档)
在页面开发时我们少不了各种鼠标交互动作(点击、移动、按下、弹起)。而想要得到鼠标当前的位置坐标,可以通过对应的 event 对象来获取。
(3)这里我将方块 margin-top 设为 1000px 使页面出现滚动条,点击后获取坐标如下:
1,获取相对于“触发事件的元素”的坐标
(1)通过 event 对象的 offsetX 和 offsetY 可以获取到鼠标相对于当前所指向对象的坐标。比如下面样例我们在 div 上添加了个 click 事件,那么它获取到的坐标即为鼠标在这个 div 内部的坐标。
(2)我们在 div 差不多中间位置点击鼠标,运行结果如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> <style media="screen"> #rect { background-color: #2D9015; width: 200px; height: 100px; margin: 100px 0 0 50px; color: white; text-align: center; line-height: 50px; } </style> <script type="text/javascript"> function rectClick(event) { //获取相对于当前所指向对象的位置坐标 alert('x:' + event.offsetX + " y:" + event.offsetY); } </script> </head> <body> <div id="rect" onclick="rectClick(event)"> 200 * 100 </div> </body> </html>
(2)我们在 div 差不多中间位置点击鼠标,运行结果如下:

2,获取相对于屏幕的坐标
通过 event 对象的 screenX 和 screenY 可以获取屏幕坐标(包括上面浏览器工具栏标签页)

function rectClick(event) { //获取相对于屏幕的位置坐标 alert('x:' + event.screenX + " y:" + event.screenY); }
3,获取相对于浏览器可视区域的坐标
通过 event 对象的 clientX 和 clientY 可以获取鼠标相对于浏览器视口(即滚动条之外的部分忽略掉)的坐标。

function rectClick(event) { //获取相对于浏览器视口的坐标 alert('x:' + event.clientX + " y:" + event.clientY); }
4,获取相对文档的坐标
(1)如果需要获取鼠标相对于网页文档中的绝对坐标(即以页面左上角为参照点),那么就需要考虑页面滚动,也就是说将可视区域的坐标加上滚动距离。
但由于不同的浏览器使用不同的渲染方式,获取滚动距离方式各不相同,甚至会出现误差。所以为确保兼容性,我们首先封装一个通用方法方便使用。
(2)使用时将 event 传入即可得到相对与整个文档的坐标
但由于不同的浏览器使用不同的渲染方式,获取滚动距离方式各不相同,甚至会出现误差。所以为确保兼容性,我们首先封装一个通用方法方便使用。
//获取鼠标相对于文档的坐标(考虑页面滚动) function getMousePosition(event) { var x = y = 0, doc = document.documentElement, body = document.body; if(!event) event=window.event; if (window.pageYoffset) {//pageYoffset是Netscape特有 x = window.pageXOffset; y = window.pageYOffset; }else{ x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); y = (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } x += event.clientX; y += event.clientY; return {'x' : x, 'y' : y}; }
(2)使用时将 event 传入即可得到相对与整个文档的坐标
function rectClick(event) { //获取鼠标相对于文档的坐标 var position = getMousePosition(event); alert('x:' + position.x + " y:" + position.y); }
(3)这里我将方块 margin-top 设为 1000px 使页面出现滚动条,点击后获取坐标如下:
