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

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减去内部 ;我现在正在做什么),我得到元素的内容区域position,减去偏移层次结构中的所有边框和填充.
• 如果我得到元素的"外部"左上角和偏移父母的"外部"左上角之间的距离总和(outers减去outers),我得到元素的内容区域的位置,减去边框和填充期望的元素(关闭,但不完全).
• 如果我得到元素的"内部"左上角和偏移父母的内部"内部"(内部减去内部)之间的距离总和,我得到元素的内容区域的位置.这就是我要的.

Answer 1

这是一个使用element_position()知道填充和边框的函数的实例.我在原始示例中添加了一些额外的填充和边距.

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

要使用它,请将光标移到棕色区域上.生成的白色区域是实际的画布内容.棕色是填充物,红色是边框,依此类推.在此示例和稍后的示例中,canvas x和canvas 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()功能正常工作.