如何獲取光標在居中的div位置？

Question

我當時正在制作繪圖應用程序，因此必須居中。

為了檢測我使用的光標位置

$('#drawbox').mousedown(function(e){
    paint = true;

    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    addClick(e.pageX-this.offsetLeft, e.pageY-this.offsetTop);
    redraw();
});

繪制框div被包裝在具有以下樣式的居中div中

position:relative;
margin:auto;
text=align:center;

這導致我的繪圖超出范圍，由於某些原因，在沒有居中包裝div的情況下它可以正常工作。 謝謝你的幫助

這是演示的小提琴

https://jsfiddle.net/ok0ohbxj/

Answer 1

參考您在問題評論中發布的小提琴，問題在於您使用offsetTop ：

HTMLElement.offsetTop只讀屬性返回當前元素相對於offsetParent節點頂部的距離。

在您的情況下，offsetParent節點是包裝容器.centerHelper而不是您的文檔。

由於您已經在使用jQuery，所以我建議$('drawbox').offset() ，它返回相對於文檔的偏移量：

$('#drawbox').mousedown(function(e){
    paint = true;

    var mouseX = e.pageX - $('#drawbox').offset().left;
    var mouseY = e.pageY - $('#drawbox').offset().top;
    addClick(mouseX, mouseY);
    redraw();
});

$('#drawbox').mousemove(function(e){
    if (paint){
        var mouseX = e.pageX - $('#drawbox').offset().left;
        var mouseY = e.pageY - $('#drawbox').offset().top;
        addClick(mouseX,mouseY, true);
        redraw();
    }
});

還有一個小提琴供您試用： https : //jsfiddle.net/6gwnexjL/