在滾動div中獲取鼠標位置

最近幾天一直在嘲笑我的另一個問題。正如你可能從我的其他問題中看到的，我正在創建一些思維導圖軟件。所以（非常簡化）我有兩個div。一個是頁面上的正方形，另一個是div的內容，大約是可拖動的10倍。這樣，對象可以放在屏幕上，然後稍微移動到另一個對象被添加等。我通過創建外部div滾動來做到這一點。在滾動div中獲取鼠標位置

我遇到的問題是在java腳本中的鼠標位置。如果我在div中的任何位置獲得鼠標位置，它將不會是正確的，因爲我將內部div的一半大小偏移到頂部和左側（因此用戶正在查看畫布的中間並可以以任何他們喜歡的方式）。我已經嘗試了幾十種不同的鼠標座標功能，但這些功能似乎都不起作用。這應該是我的地方在網上找到了跨瀏覽器的一個例子是：

function getMouse(e) { 
    var posx; 
    var posy; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.getElementById("canvas").scrollTop; 
    } 
} //getMouse

但是，即使這是行不通的。我幾乎可以肯定，這個錯誤是因爲我的內部div是可拖動的。希望我已經做出了一些解釋，但如果我沒有試圖證明我有這種情況（儘管這裏沒有完成鼠標點擊，純粹是爲了展示我的div結構）。在產品中，我讓用戶雙擊畫布並出現一個新的對象，因此鼠標座標爲什麼需要正確。

我希望有人能幫助我。

在此先感謝。

編輯：無法提及，對於我的應用程序的一部分，我使用JQuery，所以無論有沒有JQuery的解決方案都可以。再次感謝。

來源

2011-02-10 Adam Holmes

我注意到，你的小提琴是使用jQuery。既然你沒有在這裏提到它，你會使用jQuery作爲你的解決方案的一部分嗎？相對於畫布或文檔，您期望的鼠標座標是什麼？ – Nimrod 2011-02-11 00:10:24

那麼，如果它可以在jQuery中更容易完成，那就可以了......兩種解決方案都很好......我會盡快更新帖子。我需要相對於內部div的位置，即jsfiddle中的#canvas。謝謝。 – 2011-02-11 00:16:41

我希望我能正確理解你的問題。

您可以使用.offset()來確定任何元素相對於根文檔的當前偏移量。然後可以將該偏移量與鼠標位置進行比較。

您可以使用event.pageX和event.pageY來確定當前的鼠標位置。

您可以使用$ {document} .scrollLeft()和$ {document}。 scrollTop()來確定當前滾動位置。

相對於內DIV鼠標位置然後可以用

$("#outer_canvas").mousemove(function(e) { 
    var relativePosition = { 
     left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left, 
     top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top 
    }; 
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>'); 
});

來源

2011-02-11 02:02:32

獲得我知道這是非常晚了，但我遇到了同樣的情況我自己，這是我如何解決它。

我不想使用jQuery，所以我編寫了這個遞歸偏移函數來處理滾動偏移和div放置在多個可滾動div中的問題。

function recursive_offset (aobj) { 
var currOffset = { 
    x: 0, 
    y: 0 
} 
var newOffset = { 
    x: 0, 
    y: 0 
}  

if (aobj !== null) { 

    if (aobj.scrollLeft) { 
    currOffset.x = aobj.scrollLeft; 
    } 

    if (aobj.scrollTop) { 
    currOffset.y = aobj.scrollTop; 
    } 

    if (aobj.offsetLeft) { 
    currOffset.x -= aobj.offsetLeft; 
    } 

    if (aobj.offsetTop) { 
    currOffset.y -= aobj.offsetTop; 
    } 

    if (aobj.parentNode !== undefined) { 
     newOffset = recursive_offset(aobj.parentNode); 
    } 

    currOffset.x = currOffset.x + newOffset.x; 
    currOffset.y = currOffset.y + newOffset.y; 
    console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
} 
return currOffset; 
}

將其用於實際：

var offsetpos = recursive_offset (this); //or some other element 

    posX = event.clientX+offsetpos.x; 
    posY = event.clientY+offsetpos.y;

來源

2013-06-12 09:42:56

在滾動div中獲取鼠標位置

回答

相關問題