1

我有这个 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 中跟随我的鼠标)并且不会调用 mouse-up 事件。因此,一旦我第二次释放鼠标按钮,它就会开始正常绘制折线,但单击没有按下,如果我再次单击鼠标向上事件,它就会再次开始正常工作。这只发生在我第二次尝试画线时,第一次,第三次和之后的所有其他人都正常工作。

任何人都知道我是否做错了什么,或者这确实是一个 Firefox 错误,如果是这样,任何人都知道如何解决?

4

1 回答 1

1

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

于 2012-07-23T13:26:11.790 回答