javascript - 获取鼠标相对于元素内容区域的位置

Question

当鼠标移到一个元素上时，我想获取光标相对于元素内容区域左上角的鼠标坐标(这是不包括填充、边框和轮廓的区域)。听起来很简单，对吧？到目前为止，我拥有的是一个非常流行的功能:

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 是元素的“外部”左上角与其偏移父元素的“内部”左上角之间的差异，所以总和位置将跳过层次结构中的所有 边框和填充。

下面的比较应该(希望)阐明我的意思。

• 如果我得到元素的“外部”左上角与其偏移父元素的“内部”左上角之间的位置距离总和(outers minus inners；我在做什么现在)，我得到元素的内容区域的位置，减去偏移层次结构中的所有边框和填充。
• 如果我得到元素的“外部”左上角与其偏移父元素的“外部”左上角之间位置的距离总和(外部减去外部)，我得到元素的内容区域的位置，减去所需元素的边框和填充(接近，但不完全)。
• 如果我得到元素的“内部”左上角与其偏移父元素的“内部”左上角之间的距离总和(内部减去内部)，我得到元素内容区域的位置。这就是我想要的。

Answer 1

这是一个使用可识别填充和边框的 element_position() 函数的实例。我为您的原始示例添加了一些额外的填充和边距。

http://jsfiddle.net/Skz8g/4/

要使用它，请将光标移到棕色区域上。生成的白色区域是实际的 Canvas 内容。棕色是填充，红色是边框，等等。在此示例和后面的示例中，canvas x 和 canvas y 读数指示光标相对于 Canvas 内容的位置。

这是 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() 函数正常工作.