当鼠标移动到元素上时,我想要获取相对于元素内容区域左上角的鼠标坐标(这是不包括填充的区域,边框和轮廓)。听起来很简单,对吧?我至今是一个非常受欢迎的功能:获取鼠标相对于元素内容区域的位置
function element_position(e) {
var x = 0, y = 0;
do {
x += e.offsetLeft;
y += e.offsetTop;
} while (e = e.offsetParent);
return { x: x, y: y };
}
而且我相对鼠标位置得到一个元素element
:
p = element_position(element);
x = mouseEvent.pageX - p.x;
y = mouseEvent.pageY - p.y;
这是不完全正确的。由于offsetLeft
和offsetTop
是元素的“外部”左上角与其偏移父级的“内部”左上角之间的差异,因此总和位置将跳过层次结构中的边框和填充处的全部。
下面是一个比较,应该(希望)澄清我的意思。
- 如果我有距离的总和中的元素的“外部”左上角的偏移父母的“内部”左上角之间的位置(,外表面减去内部件;什么,我现在在做什么),我得到元素的内容区域的位置,减去偏移层次结构中的所有边框和填充。
- 如果我得到元素的'外部'左上角和他们抵消父项的'外部'左上角之间的距离总和(外部减去外部),我得到元素的内容区域的位置,减去所需元素的边界和填充(关闭,但不是那里)。
- 如果我得到元素的“内部”左上角与其父亲的内部左上角之间的距离总和(内部减号内部),则获取元素内容区域的位置。这就是我要的。
我个人更喜欢不将CSS应用于画布本身,而是将画布包裹在用CSS装饰的元素中。带走很多PITA。 ;) – 2011-04-22 12:49:14
这是真的,我不会在我的画布元素上应用填充/边框。只是一个理论问题,真的。 – 2011-04-22 12:52:00
看起来'offsetLeft/Top'类型的获取元素位置的方法不仅不符合目标元素的边框和填充的大小,而且也包含所有偏移父元素的边框和填充。请查看我重写的问题,看看你是否可以考虑我的情况。 – 2011-04-22 13:30:27