Question

我有这个javascript文件（$（“＃paper2”）是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: {}
    });

});

基本上当我将鼠标键放在div的顶部时，它开始绘制一条跟随鼠标的折线，允许一些基本绘图。它在Opera和Chrome上运行正常，但是在Firefox上它在我绘制的第一条折线上工作正常，第二次（释放鼠标再按一次）而不是绘制它就像我拖动图像一样（所有SVG的东西）在我的div内部跟随我的鼠标）并且不调用鼠标向上事件。因此，一旦我第二次释放鼠标按钮，它会开始正常绘制折线，但点击不会停止，如果我再次点击鼠标按钮事件被触发并再次开始正常工作。这只发生在我第二次尝试绘制一条线时，第一次，第三次以及所有其他后续正常工作。

任何人都知道我做错了什么或者这确实是一个firefox错误，如果有人知道如何解决这个问题？

Answer 1

你做错了什么。您需要在每个事件处理程序中调用ev.preventDefault（）。

jQuery SVG创建折线，firefox bug？

1 个答案: