Javascript 指针相对于具有动态DOM的元素的位置

这是与查找相对于元素的指针位置相关的后续操作

以下是他的解决方案供参考：

function mouseMoveHandler(e)
{
    var style = getComputedStyle(c,null) ;
    var borderTop = style.getPropertyValue("border-top-width") ;
    var borderLeft = style.getPropertyValue("border-left-width") ;
    var paddingTop = style.getPropertyValue("padding-top") ;
    var paddingLeft = style.getPropertyValue("padding-left") ;
    var offsetX = e.offsetX || e.layerX || 0 ;
    var offsetY = e.offsetY || e.layerY || 0; 
    var x = offsetX ;
    var y = offsetY ;
    if(window.navigator.userAgent.indexOf("Opera") === -1){ 
        x -= parseInt(paddingLeft,10) ;
        y -= parseInt(paddingTop,10) ;
        if(window.navigator.userAgent.indexOf("MSIE") === -1){
            x -= parseInt(borderLeft,10)  ;
            y -= parseInt(borderTop,10)  ;    
        }
    }
    // do something with x, y
}

现在，我对这段代码有一些顾虑：

此代码使用offsetX/offsetY。据我所知，只为MouseEvent指定clientX/clientY和screenX/screenY属性。据我所知，MouseeEvent只指定了相同的两个属性。offsetX/offsetY在技术上是“非标准的”，还是我在这里遗漏了什么？假设它会继续存在安全吗

我有一些这样的文件：

通过修改

视口的变换，我可以在场景中移动矩形

如何更新视口的变换：

// matrix is the updated transformation of the viewport
var transform = svg_base.createSVGTransformFromMatrix(matrix);
viewport.transform.baseVal.initialize(transform);

在Chrome和Firefox中，这一切都非常好。然而，在IE10和Opera 12中，存在偏移值不断“跳跃”的问题。请注意，据我所知，只有在涉及此转换更新过程时才会发生这种情况。注释掉它，看起来offsetX/offsetY值表现良好

如果我选择左下角并将其向上拖动，以下是IE10中offsetx/offsetY值的简短日志：

64, 128 
 65, 127 
 66, 128 
 67, 125 
 64, 127 
 67, 122 
 64, 127 
 67, 119 
 64, 128 
 67, 118 
 64, 126 
 67, 115 
 64, 126 
 67, 112 
 64, 126 
 67, 109 
 64, 126 
 67, 106
64, 128 
65, 127 
66, 128 
67, 125 
64, 127 
67, 122 
64, 127 
67, 119 
64, 128 
67, 118 
64, 126 
67, 115 
64, 126 
67, 112 
64, 126 
67, 109 
64, 126 
67, 106 
注意，当我稳定地向上移动鼠标时，坐标是如何跳跃的（并且稍微向右移动，尽管这不是有意的）。这会导致闪烁效果，最终视口将与预期的移动操作不同步。我的问题是，为什么IE10/Opera中会出现这种情况，而不是Firefox/Chrome？是否有更好的方法获取鼠标指针相对于svg_基本元素的位置？或者有更好的方法来更新视口转换矩阵吗？
在使用FireFox、Chrome、IE10和Opera（最常用的现代桌面浏览器，由于无法访问Safari）进行了一些测试后，我开发了一个基于此解决方案的替代方案

实际上，我不确定在所有情况下，它的健壮性如何，也不确定它在较旧的浏览器中的性能如何。据我所知，绝大多数代码都是“符合标准的”，只有一个例外，那就是使用pageX/pageY支持旧的浏览器（不确定这适用于哪些浏览器，这是quirksmode.org实现的一部分）

欢迎并鼓励您提出意见和建议。
为什么您要使用pageX/Y而不仅仅是clientX/Y？如上所述，我实际上是在quirksmode.org上复制实现。我不知道它为什么在那里，我没有时间在每个主要浏览器的多个版本上实际测试，看看代码是否执行过。我查看了它，阅读了参考文章（链接已断，在别处找到），按版本检查了浏览器使用情况：clientX/Y在99%以上的浏览器中正常工作，它只是在一些旧的次要浏览器中实现不正确。但是关于pageX/Y，使用pageX/Y可以计算正确的clientX/Y，但是我认为您只需要body的滚动或docElem的滚动，请参阅。
// params:
//  - elem: the element to get pointer coords relative to
//  - e: MouseEvent object
function mousePosRelElement(elem, e)
{
    var x = 0;
    var y = 0;

    var bounds = elem.getBoundingClientRect();

    // not actually sure which browsers use pageX/pageY, just left in from quirksmode implementation
    if(e.pageX !== undefined && e.pageY !== undefined)
    {
        x = e.pageX - bounds.left - document.body.scrollLeft - document.documentElement.scrollLeft;
        y = e.pageY - bounds.top - document.body.scrollTop - document.documentElement.scrollTop;
    }
    else if(e.clientX !== undefined && e.clientY !== undefined)
    {
        x = e.clientX - bounds.left;
        y = e.clientY - bounds.top;
    }

    return {x: x, y: y};
}