Question

我尝试使用鼠标在SVG拖动中移动框元素。它在Chrome / Chromium中运行良好，但在Firefox工作中第一次移动但后来失败了。您可以在that site中测试代码。

有没有办法让它在Firefox中运行？感谢。

来源：

<html>
    <head>
        <meta charset="UTF-8">
        <title>Nodes</title>
        <script>
            'use strict';

            var node;
            var startX;
            var startY;

            function setup() {
                node = document.getElementById('node');
                node.addEventListener('mousedown', function(event) {
                    document.addEventListener('mousemove', move, false);
                    startX = event.clientX;
                    startY = event.clientY;
                }, false);
                node.addEventListener('mouseup', function() {
                    document.removeEventListener('mousemove', move, false);
                }, false);
            }

            function move(event) {
                var positionX = Number(node.getAttribute('x')) + event.clientX - startX;
                var positionY = Number(node.getAttribute('y')) + event.clientY - startY;
                node.setAttribute('x', positionX);
                node.setAttribute('y', positionY);
                startX = event.clientX;
                startY = event.clientY;
            }
        </script>
    </head>
    <body onload="setup();">
        <svg width="800" height="600">
            <rect width="800" height="600" fill="#444444"/>
            <rect id="node" x="368" y="268" width="64" height="64" rx="8" ry="8" fill="#222244"/>
        </svg>
    </body>
</html>

P.S。抱歉我的英文不好。

Answer 1

在鼠标停止的事件处理程序中，您必须调用preventDefault（），即

  node.addEventListener('mousedown', function(event) {
        event.preventDefault();
        document.addEventListener('mousemove', move, false);
        startX = event.clientX;
        startY = event.clientY;
    }, false);

如果没有尝试将event.preventDefault（）调用添加到其他事件处理函数，即mousemove和mouseup，这就足够了。

Firefox有一些事件的默认处理程序，在这种情况下你不想使用它们。

在Firefox中移动SVG元素失败

1 个答案: