我意识到我有点晚了，但这与纯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 ; 
}

它是如何工作的。

我们要做的第一件事是获取HTML元素(内容区域)相对于当前视口的位置。如果页面有滚动条并且正在滚动，则getBoundingClientRect()返回的数字。HTML标记的左边将是负的。然后，我们使用这个数字来计算元素与内容区域左侧之间的距离。使用element_offset_x = element.getBoundingClientRect().left......;

知道元素到内容区域的距离。事件。clientX给出了指针到视口的距离。重要的是要理解视口和内容区域是两个不同的实体，如果页面被滚动，视口可以移动。因此，即使页面被滚动，clientX也将返回相同的数字。

为了弥补这一点，我们需要将指针的x位置(相对于视口)添加到视口的x位置(相对于内容区域)。视窗的X位置是通过window.pageXOffset找到的。

因为我没有找到一个jquery免费的答案，我可以复制/粘贴，这里是我使用的解决方案:

document.getElementById('clickme').onclick = function(e) { // e = Mouse click event. var rect = e.target.getBoundingClientRect(); var x = e.clientX - rect.left; //x position within the element. var y = e.clientY - rect.top; //y position within the element. console.log("Left? : " + x + " ; Top? : " + y + "."); } #clickme { margin-top: 20px; margin-left: 100px; border: 1px solid black; cursor: pointer; } <div id="clickme">Click Me -<br> (this box has margin-left: 100px; margin-top: 20px;)</div>

完整的例子

您可以简单地使用jQuery的事件。pageX和事件。使用jQuery的offset()方法获取鼠标相对于元素的位置。

  $(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 + ")");
    });
  });

你可以在这里看到一个例子:如何找到相对于元素的鼠标位置

在纯javascript中没有答案，当reference元素嵌套在其他可以具有绝对定位的元素中时，返回相对坐标。下面是针对这种情况的解决方案:

function getRelativeCoordinates (event, referenceElement) {

  const position = {
    x: event.pageX,
    y: event.pageY
  };

  const offset = {
    left: referenceElement.offsetLeft,
    top: referenceElement.offsetTop
  };

  let reference = referenceElement.offsetParent;

  while(reference){
    offset.left += reference.offsetLeft;
    offset.top += reference.offsetTop;
    reference = reference.offsetParent;
  }

  return { 
    x: position.x - offset.left,
    y: position.y - offset.top,
  }; 

}

Mark van Wyk的回答让我找到了正确的方向，但并没有完全解决我的问题。我仍然在另一个元素中包含的元素中绘画。

以下解决了它为我:

        x = e.pageX - this.offsetLeft - $(elem).offset().left;
        y = e.pageY - this.offsetTop - $(elem).offset().top;

换句话说，我简单地堆叠了所有嵌套元素的偏移量

摘自本教程，感谢上面的评论做了更正:

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 );
} );