几次mousedowns后,SVG mousemove事件在Firefox中停止触发

Question

几次mousedowns后,SVG mousemove事件在Firefox中停止触发

grw*_*grw 3 html firefox svg mousemove dom-events

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

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

类似的"纯"SVG页面可以在Firefox以及其他浏览器中使用.

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

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

<!DOCTYPE HTML5>

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rob*_*son 8

你应该调用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;
  }

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，2 月前
查看次数：	5360 次
最近记录：	6 年，2 月前