SVG鼠标移动事件在Firefox中进行几次点击后停止触发

Question

SVG鼠标移动事件在Firefox中进行几次点击后停止触发

4

我正在编写一个 HTML5 应用程序，主要使用 SVG 内容，在 HTML 页面中。其中我需要做的任务之一是在画布上移动对象。我发现，在 Firefox 中，第一次按下拖放释放操作符如预期工作，但很快代码停止接收 mousedown 之后的 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>

- grw

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

在所有的鼠标操作处理程序中都应该调用evt.preventDefault();。因为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;
  }