我正在编写一个 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>