在 Firefox 中移动 SVG 元素失败答案

【问题标题】：Moving a SVG element in Firefox fails在 Firefox 中移动 SVG 元素失败
【发布时间】：2014-06-03 07:58:32
【问题描述】：

我正在尝试用鼠标拖动 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>

附：对不起我的英语不好。

【问题讨论】：

你的调试告诉你什么？有什么错误吗？事件是否在 Fx 中触发？ Fx 中是否提供所需的节点？ setAttribute() 方法是否在浏览器中按预期工作？首先使用console.log() 帮助自己，并尝试找出 Firefox 到底是哪一部分出了问题。
您好，谢谢您的回答。代码在 Firefox 中运行良好，前 2-3 次移动，然后失败，控制台中没有错误，一个矩形元素正在移动，但另一个在拖动时在原点，然后在取消单击时，原点框消散器和其他工作正常，需要单击再次下降。抱歉我的英语不好，但很难为我解释。

标签： javascript firefox svg

【解决方案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 有一些事件的默认处理程序，您不想在这种情况下使用它们。

【讨论】：

谢谢！效果很好！对不起，我不能投票，我是新用户，没有足够的声誉。