几次鼠标按下后，SVG mousemove 事件在 Firefox 中停止触发答案

【问题标题】：SVG mousemove events stop firing in Firefox after a few mousedowns几次鼠标按下后，SVG mousemove 事件在 Firefox 中停止触发
【发布时间】：2012-09-19 10:30:07
【问题描述】：

我正在编写一个 HTML5 应用程序，主要使用 SVG 内容，在 HTML 页面中。我需要做的其中一项任务是在画布上移动对象。我发现，在 Firefox 中，第一次按下-拖动-释放操作按预期工作，但很快代码在鼠标按下后停止接收 mousemove 事件。相反，我看到了“捉鬼敢死队”光标，好像 Firefox 认为我正在尝试进行拖放操作。通过单击绿色矩形，我最终可以在 mousedown 事件一到两个周期后恢复 mousemove，但随后问题再次出现。我什至设置了 draggable="false"，如下面的简单测试用例所示，以确保禁用 DnD。（所有的内容都是从一个文件中复制出来的，不过看起来好像在这里分开了。）

此测试用例在 IE9、Chrome、Opera 和 Safari 中运行良好。

类似的“纯”SVG 页面在 Firefox 和其他浏览器中也可以使用。

我在 Windows 7 客户端上使用 Firefox 15.0.1，从 Linux 机器上提供页面。

我有什么遗漏吗？或者这可能是 Firefox 的错误？

<!DOCTYPE HTML5>

<title>Test Mouse Events</title>

<script>

function mouseDown(evt)
  {
  document.getElementById("udText").textContent = "mousedown at "+evt.clientX+","+evt.clientY;
  }

function mouseMove(evt)
  {
  document.getElementById("moveText").textContent = "mousemove at "+evt.clientX+","+evt.clientY;
  }

function mouseUp(evt)
  {
  document.getElementById("udText").textContent = "mouseup at "+evt.clientX+","+evt.clientY;
  }

function init()
  {
  document.getElementById("field").addEventListener("mousedown", mouseDown, false);
  document.getElementById("field").addEventListener("mouseup", mouseUp, false);
  document.getElementById("field").addEventListener("mousemove", mouseMove, false);
  }

</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:ev="http://www.w3.org/2001/xml-events"
  id="canvas"
  width="800"
  height="600"
  version="1.1"
  baseProfile="full"
  onload="init()"
  >

  <rect id="field" x="50" y="50" width="700" height="500" fill="#20c000" draggable="false"/>
  <text id="udText" x="80" y="520" font-size="30" fill="#000000">No up or down events yet</text>
  <text id="moveText" x="420" y="520" font-size="30" fill="#000000">No move events yet</text>

</svg>

【问题讨论】：

标签： html firefox svg dom-events mousemove

【解决方案1】：

你应该调用 evt.preventDefault();在所有 mouseXXX 处理程序中。 Firefox 有默认的拖放处理，你不希望这样。这不是 Firefox 中的错误。

这些更改为我解决了问题：

function mouseDown(evt)
  {
  evt.preventDefault();
  document.getElementById("udText").textContent = "mousedown at "+evt.clientX+","+evt.clientY;
  }

function mouseMove(evt)
  {
  evt.preventDefault();
  document.getElementById("moveText").textContent = "mousemove at "+evt.clientX+","+evt.clientY;
  }

function mouseUp(evt)
  {
  evt.preventDefault();
  document.getElementById("udText").textContent = "mouseup at "+evt.clientX+","+evt.clientY;
  }

【讨论】：

这确实成功了，毕竟，一旦我取消了另一个注册mousedown事件处理程序的实验，我同时尝试过。我想 mousedown 是防止不希望的（在我的情况下）默认行为的关键。虽然我很惊讶设置 draggable="false"，即使在 SVG 和 rect 元素上也不足以禁用默认行为，但我感谢您的快速回答！
SVG 元素目前没有可拖动属性。我想即将到来的 SVG 2 规范可能会解决这个问题。