找到鼠标相对于元素的位置

canvas.onmousedown = function(e) {
    pos_left = e.pageX - e.currentTarget.offsetLeft;
    pos_top = e.pageY - e.currentTarget.offsetTop;
    console.log(pos_left, pos_top)
}

HTMLElement.offsetLeft

HTMLElement.offsetLeft是一个只读属性，返回当前元素左上角相对于HTMLElement.offsetParent节点的左侧偏移量（以像素为单位）。

对于块级元素，offsetTop、offsetLeft、offsetWidth 和 offsetHeight 描述的是相对于 offsetParent 的边框盒子。

然而，对于可以从一行换到下一行的内联元素（比如 span），offsetTop 和 offsetLeft 描述的是第一个边框盒子的位置（使用Element.getClientRects()获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界边框盒子的尺寸（使用Element.getBoundingClientRect()获取其位置）。

HTMLElement.offsetTop

HTMLElement.offsetTop 是一个只读属性，返回当前元素相对于offsetParent节点顶部的距离（以像素为单位）。

MouseEvent.pageX

pageX 是一个只读属性，返回事件相对于整个文档的水平像素 X 坐标。该属性会考虑页面的任何水平滚动。

MouseEvent.pageY

pageY 是一个只读属性，返回事件相对于整个文档的垂直像素 Y 坐标。该属性会考虑页面的任何垂直滚动。

如需进一步解释，请参阅Mozilla开发者网络：

https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageY https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop

我认为以上答案都不令人满意，因此这是我使用的方法：

// Cross-browser AddEventListener
function ael(e, n, h){
    if( e.addEventListener ){
        e.addEventListener(n, h, true);
    }else{
        e.attachEvent('on'+n, h);
    }
}

var touch = 'ontouchstart' in document.documentElement; // true if touch device
var mx, my; // always has current mouse position IN WINDOW

if(touch){
    ael(document, 'touchmove', function(e){var ori=e;mx=ori.changedTouches[0].pageX;my=ori.changedTouches[0].pageY} );
}else{
    ael(document, 'mousemove', function(e){mx=e.clientX;my=e.clientY} );
}

// local mouse X,Y position in element
function showLocalPos(e){
    document.title = (mx - e.getBoundingClientRect().left)
        + 'x'
        + Math.round(my - e.getBoundingClientRect().top);
}

如果您需要知道页面当前的垂直滚动位置：

var yscroll = window.pageYOffset
        || (document.documentElement && document.documentElement.scrollTop)
        || document.body.scrollTop; // scroll Y position in page

来自这个教程，在顶部评论的帮助下进行了修正：

function getMousePos( canvas, evt ) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: Math.floor( ( evt.clientX - rect.left ) / ( rect.right - rect.left ) * canvas.width ),
        y: Math.floor( ( evt.clientY - rect.top ) / ( rect.bottom - rect.top ) * canvas.height )
    };
}

在画布上使用如下：

var canvas = document.getElementById( 'myCanvas' );
canvas.addEventListener( 'mousemove', function( evt ) {
    var mousePos = getMousePos( canvas, evt );
} );

const findMousePositionRelativeToElement = (e) => {
    const xClick = e.clientX - e.currentTarget.offsetLeft;
    const yClick = e.clientY - e.currentTarget.offsetTop;
    console.log(`x: ${xClick}`);
    console.log(`y: ${yClick}`);

    // or
    const rect = e.currentTarget.getBoundingClientRect();
    const xClick2 = e.clientX - rect.left;
    const yClick2 = e.clientY - rect.top;
    console.log(`x2: ${xClick2}`);
    console.log(`y2: ${yClick2}`);
}

基于@Spider的解决方案，我的非JQuery版本如下：

// Get the container element's bounding box
var sides = document.getElementById("container").getBoundingClientRect();

// Apply the mouse event listener
document.getElementById("canvas").onmousemove = (e) => {
  // Here 'self' is simply the current window's context
  var x = (e.clientX - sides.left) + self.pageXOffset;
  var y = (e.clientY - sides.top) + self.pageYOffset;
}

这适用于滚动和缩放（在这种情况下有时返回浮点数）。

我知道我有点晚了，但这个方法使用纯JavaScript实现，即使元素比视口大并且用户已经滚动，它也能给你指针在元素内的坐标。

var element_offset_x ; // The distance from the left side of the element to the left of the content area


....// some code here (function declaration or element lookup )



element_offset_x = element.getBoundingClientRect().left  -  document.getElementsByTagName("html")[0].getBoundingClientRect().left  ;

....// code here 




function mouseMoveEvent(event) 
{
   var pointer_location = (event.clientX + window.pageXOffset) - element_offset_x ; 
}

document.addEventListener("mousemove", (e) => {
  let xCoord = e.clientX - e.target.getBoundingClientRect().left + e.offsetX
  let yCoord = e.clientY - e.target.getBoundingClientRect().top + e.offsetY
  console.log("xCoord", xCoord, "yCoord", yCoord)
})

使用此方法快速获取鼠标位置：

Object.defineProperty(MouseEvent.prototype, "mouseX", {
   get() {
      return this.clientX - this.currentTarget.getBoundingClientRect().left;
   }
});
Object.defineProperty(MouseEvent.prototype, "mouseY", {
   get() {
      return this.clientY - this.currentTarget.getBoundingClientRect().top;
   }
});

例子：

document.body.onmousemove=function(e){console.log(e.mouseX,e.mouseY)}

  $(document).ready(function() {
    $("#myDiv").mousemove(function(event){            
      var X = event.pageX - $(this).offset().left;
      var Y = event.pageY - $(this).offset().top;
      $(".cordn").text("(" + X + "," + Y + ")");
    });
  });

我实现了另一种解决方案，我认为非常简单，所以想和大家分享。

对我来说，问题是拖动的div会跳到鼠标光标的0,0位置。因此，我需要捕获div上鼠标的位置来调整div的新位置。

我读取了div的PageX和PageY，并根据它们设置了相应的top和left，然后为了获取值以调整坐标以保持光标在可拖动div中的初始位置，我使用onDragStart监听器并存储e.nativeEvent.layerX和e.nativeEvent.layerY，只有在初始触发时才会给出鼠标在可拖动div内的位置。

示例代码：

 onDrag={(e) => {
          let newCoords;
          newCoords = { x: e.pageX - this.state.correctionX, y: e.pageY - this.state.correctionY };
          this.props.onDrag(newCoords, e, item.id);
        }}
        onDragStart={
          (e) => {
            this.setState({
              correctionX: e.nativeEvent.layerX,
              correctionY: e.nativeEvent.layerY,
            });
          }