获取相对于元素内容区域的鼠标位置 [英] getting mouse position relative to content area of an element
问题描述
当鼠标在元素上移动时，我想要获取鼠标相对于元素内容区域的左上角（这是不包括填充，边框和轮廓的区域）的鼠标坐标。听起来很简单，对吧？我到目前为止是一个非常流行的函数：
pre $ 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};
}
我得到相对于元素<$ c $的鼠标位置c>元素与：
p = element_position（element）;
x = mouseEvent.pageX - p.x;
y = mouseEvent.pageY - p.y;
这不太正确。因为 offsetLeft 和 offsetTop 是一个元素的'外部'左上角和'inner'顶部之间的差异左边的偏移父级，总和位置将跳过所有边界和填充层次。
这是一个比较，应该（希望）澄清我的意思。
- 如果我得到元素左上角的'距离'和'内部'的左上角（外部减去内部;我现在正在做的），我得到元素的内容区域的位置，减去偏移层次结构中的所有边界和填充。 >
- 如果我得到元素的'外部'左上角和他们抵消父项的'外部'左上角之间的距离总和（外部减去外部 ），我得到元素的内容区域的位置，减去de的边界和填充如果我得到元素的'内部'左上角和'内部'左上角之间的距离总和，他们的抵消父母（内部减去内部），我得到元素的内容区域的位置。这就是我想要的。 这里有一个实例，它使用
element_position（）函数知道填充和边框。我为您的原始示例添加了一些额外的填充和边距。 要使用它，将光标移动到棕色区域。由此产生的白色区域是实际的画布内容。棕色是填充，红色是边框，依此类推。在这个例子和后面的例子中，画布x 和画布y 读数指示相对于画布的光标位置内容。
以下是代码 element_position（）：
function getNumericStyleProperty（style，prop）{
return parseInt（style.getPropertyValue（prop），10）;
}
function element_position（e）{
var x = 0，y = 0;
var inner = true;
do {
x + = e.offsetLeft;
y + = e.offsetTop;
var style = getComputedStyle（e，null）;
var borderTop = getNumericStyleProperty（style，border-top-width）;
var borderLeft = getNumericStyleProperty（style，border-left-width）;
y + = borderTop;
x + = borderLeft;
if（inner）{
var paddingTop = getNumericStyleProperty（style，padding-top）;
var paddingLeft = getNumericStyleProperty（style，padding-left）;
y + = paddingTop;
x + = paddingLeft;
}
inner = false;
} while（e = e.offsetParent）;
return {x：x，y：y};
}
代码应该可以在IE9，FF和Chrome中正常工作，但我注意到了它在Opera中是不太正确的。
我最初的意图是使用类似于 e.offsetX / Y 属性因为它们更接近你想要的，并且不涉及循环嵌套元素。然而，他们的行为在不同浏览器之间变化很大，所以需要一些跨浏览器的讨论。现场示例如下：
http：// jsfiddle .net / xUZAa / 6 /
它适用于所有现代浏览器 - Opera，FF，Chrome，IE9。我个人比较喜欢它，但认为尽管你最初的问题只是获取相对于元素内容区域的鼠标位置，但你确实在问如何制作 element_position（）功能正常工作。
When the mouse is moved over an element, I want to get the mouse coordinates of the cursor relative to the top-left of the element's content area (this is the area excluding padding, border and outline). Sounds simple, right? What I have so far is a very popular function:
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 };
}
And I'd get the mouse position relative to an element element with:
p = element_position(element);
x = mouseEvent.pageX - p.x;
y = mouseEvent.pageY - p.y;
That isn't quite correct. Because the offsetLeft and offsetTop are the differences between the 'outer' top left of an element and the 'inner' top left of its offset parent, the sum position will skip over all borders and paddings in the hierarchy.
Here's a comparison that should (hopefully) clarify what I mean.
- If I get the sum of the distances in position between the 'outer' top left of the elements and the 'inner' top left of their offset parents (outers minus inners; what I am doing right now), I get the element's content area's position, minus all the borders and paddings in the offset hierarchy.
- If I get the sum of the distances in position between the 'outer' top left of the elements and the 'outer' top left of their offset parents (outers minus outers), I get the element's content area's position, minus the border and padding of the desired element (close, but not quite there).
- If I get the sum of the distances in position between the 'inner' top left of the elements and the 'inner' top left of their offset parents (inners minus inners), I get the element's content area's position. This is what I want.
Here's a live example that uses an element_position() function that is aware of padding and borders. I've added some extra padding and margins to your original example.
To use it, move the cursor over the brown area. The resulting white area is the actual canvas content. The brown is padding, the red is a border, and so on. In both this example and the one later on, the canvas x and canvas y readouts indicate the cursor position relative to canvas content.
Here's the code for element_position():
function getNumericStyleProperty(style, prop){
return parseInt(style.getPropertyValue(prop),10) ;
}
function element_position(e) {
var x = 0, y = 0;
var inner = true ;
do {
x += e.offsetLeft;
y += e.offsetTop;
var style = getComputedStyle(e,null) ;
var borderTop = getNumericStyleProperty(style,"border-top-width") ;
var borderLeft = getNumericStyleProperty(style,"border-left-width") ;
y += borderTop ;
x += borderLeft ;
if (inner){
var paddingTop = getNumericStyleProperty(style,"padding-top") ;
var paddingLeft = getNumericStyleProperty(style,"padding-left") ;
y += paddingTop ;
x += paddingLeft ;
}
inner = false ;
} while (e = e.offsetParent);
return { x: x, y: y };
}
The code should work properly in IE9, FF and Chrome, although I notice it is not quite right in Opera.
My original inclination was to use something like the e.offsetX/Y properties because they were closer to what you want, and do not involve looping over nested elements. However, their behaviour varies wildly across browsers, so a bit of cross-browser finagling is necessary. The live example is here:
It should work across all modern browsers - Opera, FF, Chrome, IE9. I personally prefer it, but thought that although your original question was just about "getting mouse position relative to content area of an element", you were really asking about how to make the element_position() function work correctly.
这篇关于获取相对于元素内容区域的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
