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

Question

我正在拉斐爾畫線。我有一個mousedown事件，我存儲起始位置。當鼠標關閉時，如果用戶移動它，我會有一個鼠標移動事件，在鼠標移動的過程中我會一直畫線。

現在，當釋放鼠標按鈕時，該行應停止。即使按鈕被釋放，如果鼠標移動，這種情況也不會發生，並且線條一直在繼續。這條線必須停止在mouseup上。如果用戶再次使用它，它應該開始一個新行。

我已經嘗試了許多與unmouse *事件的組合，但我在這裏失去了一些東西。

的jsfiddle在：http://jsfiddle.net/zaphod013/P33FA/5/

（這是我的第一次約會JS /拉斐爾所以，如果你覺得我完全偏離了軌道在這裏，請告訴我的話）

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 here或here圍繞捕捉鼠標鬆開事件，並停止其正常工作等元素得到。

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 = ''; 
}