你必须知道你的页面的结构，因为如果你的canvas是一个div的子div又是另一个div的子…然后，故事变得更加复杂。下面是我在2层div中创建一个canvas的代码:

canvas.addEventListener("click", function(event) {
var x = event.pageX - (this.offsetLeft + this.parentElement.offsetLeft);
var y = event.pageY - (this.offsetTop + this.parentElement.offsetTop);
console.log("relative x=" + x, "relative y" + y);

});

你可以买到它

var element = document.getElementById(canvasId);
element.onmousemove = function(e) {
    var xCoor = e.clientX;
    var yCoor = e.clientY;
}

因为我没有找到一个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>

完整的例子

我尝试了所有这些解决方案，由于我的特殊设置与矩阵转换容器(panzoom库)没有工作。这将返回正确的值，即使缩放和窗格:

mouseevent(e) {
 const x = e.offsetX,
       y = e.offsetY
}

但前提是没有子元素。这可以通过使用CSS使它们对事件“不可见”来规避:

.child {
   pointer-events: none;
}

这是我得到的。

    $(".some-class").click(function(e) {

    var posx = 0;
    var posy = 0;

    posx = e.pageX;
    posy = e.pageY;

    alert(posx);
    alert(posy);
});

基于@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;
}

这适用于滚动和缩放(在这种情况下，有时它返回浮动)。