当周围元素不存在时，跟踪鼠标在画布中的位置
当周围元素不存在时，跟踪鼠标在画布中的位置
提问于 2011-02-23 08:19:25
我在获取鼠标位置w.r.t画布时遇到了问题。
有两种情况：
1)如果画布div周围没有div元素，那么我可以获得鼠标位置。
2)当画布包装在div中时，offsetLeft和offsetTop不能按预期工作
造成这种差异的原因是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-02-23 09:41:44
您需要一个函数来获取position of the canvas element
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}并计算光标相对于该位置的当前位置：
$('#canvas').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coordinateDisplay = "x=" + x + ", y=" + y;
writeCoordinateDisplay(coordinateDisplay);
});offsetLeft和offsetTop的值相对于offsetParent，这是您的div节点。当您删除div时，它们是相对于body的，因此没有要减去的偏移量。
与此类似，e.pageX和e.pageY给出了光标相对于文档的位置。这就是为什么我们从这些值中减去画布的偏移量来得到真实的位置。
定位元素的另一种选择是直接使用e.layerX和e.layerY的值。这比上面的方法更不可靠，原因有两个：
- 当事件没有发生在定位的元素
- 中时，这些值也是相对于整个文档的，它们不是任何标准
的一部分
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5085689
复制相关文章
相似问题