解决方案：JS-获取鼠标位置坐标（相对于元素，屏幕，窗口，整个文档）

在页面的开发中，我们离不开各种鼠标交互操作（单击，移动，按下，弹出）。要获取鼠标的当前位置坐标，可以通过相应的事件对象获取它。

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

（1）通过事件对象的offsetX和offsetY，您可以获得鼠标相对于当前指向的对象的坐标。例如，在下面的示例中，我们向div添加一个click事件，然后它获得的坐标是鼠标div内的坐标。

  
    
    
    
    
  
  
    

      200 * 100
    
  

（2）我们在div的几乎中间位置单击了鼠标，结果如下：

2，获取相对于屏幕的坐标

可以通过事件对象的screenX和screenY（包括上面的浏览器工具栏选项卡）获取屏幕坐标

function rectClick(event) {
  //获取相对于屏幕的位置坐标
  alert('x:' + event.screenX + "  y:" +  event.screenY);
}

3，获取相对于浏览器可见区域的坐标

通过事件对象的clientX和clientY，可以获得鼠标相对于浏览器视口的坐标（即，滚动条以外的部分将被忽略）。

function rectClick(event) {
  //获取相对于浏览器视口的坐标
  alert('x:' + event.clientX + "  y:" +  event.clientY);
}

4，获取相对于文档的坐标

（1）如果需要获取鼠标相对于Web文档的绝对坐标（即，以页面的左上角为参考点），则需要考虑页面滚动，即，将可见区域的坐标添加到滚动距离中。

但是，由于不同的浏览器使用不同的呈现方法，所以获取滚动距离的方法会有所不同，甚至可能会发生错误。因此，为了确保兼容性，我们首先封装了一种易于使用的通用方法。

//获取鼠标相对于文档的坐标（考虑页面滚动）
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）使用事件时，您可以获得相对于整个文档的坐标

function rectClick(event) {
  //获取鼠标相对于文档的坐标
  var position = getMousePosition(event);
  alert('x:' + position.x + "  y:" +  position.y);
}

（[3）在这里，将框的边距设置为1000px，以使页面显示为滚动条，然后单击以获取坐标，如下所示：

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-328892-1.html