Javascript 拉斐尔：如何在mouseup上解除mousemove函数的绑定？

我在和拉斐尔划清界限。我有一个mousedown事件，在那里我存储起始位置。当鼠标按下时，如果用户移动它，我会有一个mousemove事件，在这个事件中，我会在鼠标移动时一直画线

现在，当松开鼠标按钮时，线路应该停止。这不会发生，即使松开按钮，如果鼠标移动，线条仍会继续。这条线必须停在鼠标上。如果用户再次鼠标向下移动，则应开始新的一行

我尝试了许多与UNMUSE*事件的组合，但我在这里遗漏了一些东西

JSFiddle地址：

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

---

我认为您已经步入正轨，而且大部分看起来都很好，我可能只是简化您的处理程序，而不是不断删除/添加它们，这会使处理程序难以跟踪和调试。所以我只需要一个向下/向上/移动的处理程序

编辑： 或者绕过捕获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 = '';
}

---

但我认为我在操纵者中缺少了一些东西。只有当鼠标按钮按下时，才能使用mousemove绘制线。一旦我松开按钮，线条应该停止绘制。然后，如果我再次按下鼠标按钮，就会画一条新的线。现在，无论鼠标按钮是向上还是向下，这条线一直在画。抱歉，我认为这是一个错误，它在Chrome中工作，但mouseup在FFX中不工作。我认为现在的情况是mouseup不能正常工作，因为它画了一条线来捕捉mouseup事件（在rect上）。您可以使用jquery附加处理程序，这可能是最简单的方法。您可能只需要调整光标偏移量，因为我在一个div中弹出了它，并向其中添加了处理程序。工作！谢谢我看到您将函数绑定到div事件，而不是元素事件。你能解释一下你所说的“mouseup不能正常工作，因为它画了一条线来捕获mouseup事件（因为它在rect上）”？最初mouseup绑定到rect，但是一旦我们画了线，这条线现在就在鼠标光标和rect之间了（因为我们将它直接放在鼠标下，所以唯一的mouseup事件可能来自'line'元素）。另一个解决方案可能是稍微偏移线条，但这看起来可能不太好。或者我们可以在每次创建线条元素时将鼠标移动处理程序绑定到线条元素，然后将其删除，但我认为这也很混乱。谢谢您的解释。

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