Menu
I am writing an HTML5 app using primarily SVG content, within an HTML page. One of the tasks I need to do is move objects around on the canvas. I find that, in Firefox, the first press-drag-release operation works as expected, but very soon the code stops receiving mousemove events after a mousedown. Instead, I see the "ghostbusters" cursor, as if Firefox thinks I am trying to do a Drag-and-Drop operation. I can eventually restore mousemove after mousedown events for one or two cycles by clicking around the green rectangle, but then the problem recurs. I have even set draggable="false" as seen in the simple test case below, to make sure DnD is disabled. (All of the content was copied from one file, though it looks like it is getting separated here.)
This test case works fine in IE9, Chrome, Opera, and Safari.
A similar "pure" SVG page works in Firefox as well as the other browsers.
I am using Firefox 15.0.1 on a Windows 7 client, serving the page up from a Linux box.
Is there something I am missing? Or is this perhaps a Firefox bug?
<!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>
830
You should call evt.preventDefault(); in all the mouseXXX handlers. Firefox has default drag/drop handling and you don't want that. It's not a bug in Firefox that it does that.
These changes fix it for me:
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
