畫布鼠標點擊，偏移和父節點

我是新來的畫布，我需要知道鼠標點擊的座標。我成功了：畫布鼠標點擊，偏移和父節點

var canvas = document.getElementById('MainMap'); 

canvas.addEventListener('mousedown', onMapMouseDown, false);

問題出現在我試圖找到正確的座標時。我試圖

var x = ev.x - canvas.offsetLeft; 

var y = ev.y - canvas.offsetTop;

除了canvas.offsetLeft = 0和canvas.offsetTop = 40（實際上它是正確的，因爲在畫布被放置在該位置在一個div）。 div位於另一個div中，位於div中的表格中......等等。

解可以得到正確的位置是通過比較在getParentNode遞歸函數添加偏移量（）; 那麼問題就在於此。我現在如何到達頂層節點。可能是文檔或頂級div或表格。

來源

2014-03-12 mdev

你並不需要遍歷每個節點。 offsetLeft和offsetTop表示元素相對於其的距離offset parent。什麼是offsetParent？嗯，這是有從static不同position節點的始祖（這是，relative，absolute或fixed）。

幸運的是，DOM元素包含一個名爲offsetParent屬性，它指明瞭祖先是偏移父母，所以......

var offset = {x: 0, y: 0}; 
var node = canvas; 
while (node) { 
    offset.x += node.offsetLeft; 
    offset.y += node.offsetTop; 
    node = node.offsetParent; 
}

這一直持續到節點的文件，該文件被放置在（0 ，0）。

另外，更快的方式，uing jQuery的：

var offset = $('#MainMap').offset();

來源

2014-03-12 07:49:35

它的工作了。我不得不做一些調整，以使其在Firefox中工作（它不喜歡「ev.x」），但它似乎現在在所有的brosers中都能正常工作。非常感謝您的幫助。 – mdev

我相信你需要使用「屏幕」的寬度和高度..喜歡Kinetic.js腳本庫，使之成爲一個更容易給你。不過，如果你堅持自己寫的功能，我發現本教程非常有用：

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

或者這個博客帖子：

http://miloq.blogspot.be/2011/05/coordinates-mouse-click-canvas.html

來源

2014-03-12 07:46:08 Tsasken

畫布鼠標點擊，偏移和父節點

回答

相關問題