返回 导航

其他

hangge.com

JS - 获取鼠标的位置坐标（相对于元素、屏幕、窗口、整个文档）

作者：hangge | 2019-02-19 08:10
    在页面开发时我们少不了各种鼠标交互动作（点击、移动、按下、弹起）。而想要得到鼠标当前的位置坐标，可以通过对应的 event 对象来获取。

1，获取相对于“触发事件的元素”的坐标

（1）通过 event 对象的 offsetX 和 offsetY 可以获取到鼠标相对于当前所指向对象的坐标。比如下面样例我们在 div 上添加了个 click 事件，那么它获取到的坐标即为鼠标在这个 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）如果需要获取鼠标相对于网页文档中的绝对坐标（即以页面左上角为参照点），那么就需要考虑页面滚动，也就是说将可视区域的坐标加上滚动距离。
    但由于不同的浏览器使用不同的渲染方式，获取滚动距离方式各不相同，甚至会出现误差。所以为确保兼容性，我们首先封装一个通用方法方便使用。 
//获取鼠标相对于文档的坐标（考虑页面滚动）
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 使页面出现滚动条，点击后获取坐标如下：
评论

全部评论（0）

回到顶部