Question

它可以像我在Chrome和MSIE中所期望的那样工作。由于某种原因，事件是在内部矩形元素以及SVG元素上触发（我认为）。这是酱（这是整个页面）：

<html>
<body>

    <svg width="400" height="400" style="overflow: hidden; border: 1px solid gray" id="mySVG">
        <rect x="10" y="10" width="100" height="100" fill="red" id="myRect"></rect>
    </svg>

    <script>
        svg  = document.getElementById('mySVG');
        rect = document.getElementById('myRect');

        svg.onmousemove = function (e)
        {
            if (e.currentTarget.toString().indexOf('SVGSVGElement') >= 0) {

                var x = e.offsetX,
                    y = e.offsetY;

                if (x && y) {
                    console.log(x)
                    rect.setAttribute('x', x - 50);
                    rect.setAttribute('y', y - 50);
                }
            }
        };
    </script>

</body>
</html>

Answer 1

Firefox和Chrome以不同方式实施该事件。如果你private static final Object lock = new Object();，就可以观察到这种情况。 Firefox日志如下所示：

console.log(e.target.id, x)

如果矩形不在鼠标下，则相对于mySVG 394 myRect 35 mySVG 372 myRect 36 mySVG 354 mySVG 353 myRect 48元素计算offsetX。然后，矩形在鼠标下移动，并且下一个事件之一（取决于它们的射击速度）被分派到svg元素并且相对于此计算rect。由于侦听器相对于offsetX移动矩形，因此它会跳转到左上角，并且在下一个事件中，它不再位于鼠标下方，并且事件将被分派到svg试。

Chrome日志

svg

当第一个事件被分派到mySVG 400 myRect 392 myRect 383 myRect 375 myRect 368 myRect 363元素时，所有后续事件都会被分派到svg。原因是rect总是相对于offsetX元素计算，无论鼠标是否超过svg。

考虑rect的{{3}}定义，

返回事件发生位置相对于目标节点填充边缘原点的x坐标

我想说Firefox实现更有意义。

找到相对坐标的最佳解决方案可能是

offsetX

适用于SVG和HTML元素的通用解决方案是ReadWriteLock库的CSSOM。

为什么在Firefox中闪烁？

1 个答案: