Question

I have this javascript file ( $(“#paper2”) is a div)

var lines=0;

$(document).ready(function() {        
    $("#paper2").svg({
        onLoad: function() {
            svg2 = $("#paper2").svg('get');
            root2= svg2.root();

            $("#paper2").mousedown(function(ev) {
                lines++;
                var polyline = svg2.polyline([[ev.pageX-1-this.offsetLeft , ev.pageY-this.offsetTop-1], [ev.pageX+1-this.offsetLeft , ev.pageY-this.offsetTop+1]],
                    {fill: 'none', stroke: 'black', strokeWidth: 3,
                    id: 'polyline'+lines})

                $("#paper2").mousemove(function(ev) {
                    var polyline= $('#polyline' + lines);
                    polyline.attr("points", polyline.attr("points")+ ' ' + (ev.pageX-this.offsetLeft)+','+(ev.pageY-this.offsetTop));
                });

                $("#paper2").mouseup(function(ev) {
                    var div= $("#paper2");
                    div.unbind('mousemove');
                    div.unbind('mouseup');
                })
            });             
        },
        settings: {}
    });

});

Basically when I hold the mouse key on top of the div it starts to draw a polyline that follows the mouse, allowing some basic drawing. It works fine on Opera and Chrome but on firefox it works fine on the first polyline I draw, on the second time (release the mouse then press it again) instead of drawing it acts as if I’m dragging the image (all SVG stuff that is inside my div follows my mouse) and the mouse-up event is not called. So once I release the mousebutton this second time it starts drawing the polyline normally but the click is not down, if I click again the mouse-up event is fired and it starts working normally again. This only happens on the second time I try to draw a line, the first, third and all others afterward work normally.

Anyone knows if I’m doing something wrong or if this is indeed a firefox bug, if so anyone knows how to do a workaround?

Answer 1

You are doing something wrong. You need to call ev.preventDefault() in each event handler.