Raphael：如何在mouseup上解除mousemove功能的绑定？

Question

我正在与拉斐尔划清界限。 我有一个mousedown事件，在其中存储起始位置。 按下鼠标时，如果用户移动它，则会发生mousemove事件，在此事件中，我会随着鼠标的移动不断画线。

现在，当释放鼠标按钮时，该行应停止。 即使释放了鼠标，鼠标也不会移动，这不会发生，并且行会继续进行。 该行必须在mouseup上停止。 如果用户再次按下鼠标，则应该换行。

我已经尝试了许多与unmouse *事件组合的方法，但是我在这里遗漏了一些东西。

JSFiddle位于： http : //jsfiddle.net/zaphod013/P33FA/5/

（这是我第一次与JS / Raphael约会。因此，如果您认为我在这里完全偏离了轨道，请告诉我）

var g_masterPaper;
var g_startX;
var g_startY;
var g_line;

function initDrawing() {
    g_masterPaper = Raphael(10,10,700,500);

    var masterBackground = g_masterPaper.rect(10,10,600,400);
    masterBackground.attr("fill", "#eee");

    var drawit = function(event) {
        x = event.pageX - 10;
        y = event.pageY - 10;
        var linepath = ("M"+g_startX+" "+g_startY+" L"+x+" "+y);
        g_line.attr("path", linepath);
    };

    var startit = function (event) {
        g_startX = event.pageX - 10;
        g_startY = event.pageY - 10;
        g_line = g_masterPaper.path("M"+g_startX+" "+g_startY+" L"+g_startX+" "+g_startY);
        masterBackground.mousemove(drawit);
    };

    masterBackground.mousedown(startit);
    masterBackground.mouseup(function (event) {
        this.unmousedown(startit);
        this.unmousemove(drawit);
    });

    return g_masterPaper;
}

window.onload = function () {
var paper=initDrawing();
paper.text(15,475,'Use your mouse to draw.').attr({fill:'#ff0000', 'font-size':24, 'stroke-width':1,'text-anchor':'start' });      
}

Answer 1

我认为您已经步入正轨，并且看起来还不错，我可能会简化您的处理程序，而不是继续删除/添加它们，这会使处理程序难以跟踪和调试。 所以我只有一个处理程序可以上下/移动...

编辑： jsfiddle在这里或这里绕过捕获mouseup事件并使其正常工作的其他元素。

var drawit = function(event) {
    event.preventDefault();

    x = event.pageX - 10;
    y = event.pageY - 10;
    var linepath = ("M"+g_startX+" "+g_startY+" L"+x+" "+y);
    if( g_line ) { g_line.attr("path", linepath) };
};

var startit = function (event) {
    event.preventDefault();
    g_startX = event.pageX - 10;
    g_startY = event.pageY - 10;
    g_line = g_masterPaper.path("M"+g_startX+" "+g_startY+" L"+g_startX+" "+g_startY);
};

var finish = function ( event ) {
    g_line = '';
}