[英]Get mouse position in scrollable div
在过去的几天里,另一个问题一直在盯着我。 正如您可能从我的其他问题中看到的那样,我正在创建一些思维导图软件。 所以(非常简化)我有两个div。 一个是页面上的正方形,另一个在div内部,大约是可拖动的10倍。 这样可以将对象放置在屏幕上,然后稍微移动到侧面,同时添加另一个对象等。我通过创建外部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是可拖动的。 希望我在尝试解释时有一些意义,但如果我没有这里是一个非常简单的jsfiddle ,试图证明我的情况(虽然这里没有鼠标点击,纯粹是为了演示我的div结构)。 在我制作的产品中,用户将双击画布并显示一个新对象,因此鼠标坐标需要正确的原因。
我希望有人可以帮助我。
提前致谢。
编辑:未能提到我的部分应用程序,我使用JQuery所以无论是否有JQuery的解决方案都没问题。 再次感谢。
我希望我能正确理解你的问题。
您可以使用.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>');
});
我知道这已经很晚了,但我自己遇到了同样的情况,这就是我解决它的方法。
我不想使用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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.