Javascript jQuery获取mousedown和mouseup之间的所有x和y

我正在使用拉斐尔制作一个简单的绘图应用程序。我现在正试图画一条曲线（有更好的说法吗），所以我想捕捉mousedown和mouseup之间的所有x和y。在这个stackoverflow问题上，有一个解决方案可以在事件之间执行某些操作，但我无法使x和y正确工作。我试图使用mousemove（）获取它，但是mousemove（）在函数结束时不会停止。让函数得到x和y的自我调用，我就得到了一个无限循环。所以两件事，如何连续得到x和y，以及如何避免无限循环。我知道如何把它放入一个数组，然后做一条曲线，只是不知道如何做鼠标侦听器。我现在的代码是：

var paper = new Raphael($('#canvas')[0], 500, 500);
var canvas =$('#canvas');

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
    whileDown();
});

function whileDown(){
    if(!stillDown){return;}else{
    console.log("Still in down.");
        canvas.mousemove(function(e){
        //console.log("X: " + e.offsetX + " Y: " + e.offsetY);
    });
    whileDown();
    }
}

canvas.mouseup(function(){
    stillDown = false;
});

---

我目前的目标是让它在控制台中显示它是向下的，所有的x和y都是向下的，并且它是向上的，之后什么都没有。然后我会处理这些信息。不管怎样，任何帮助都将是伟大的

在mousedown上，只需设置布尔标志：

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
});

在mousemove上，如果设置了标志，则将坐标推送到数组：

var coords = [];
canvas.mousemove(function(e){
    if(!stillDown) return;
    console.log("moving");
    coords.push({x: e.offsetX, y: e.offsetY});
    // and/or do whatever you need with the coordinates  
}

在鼠标悬停时，取消设置标志：

canvas.mouseup(function(){
    stillDown = false;
});

---

在mousedown上，只需设置布尔标志：

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
});

在mousemove上，如果设置了标志，则将坐标推送到数组：

var coords = [];
canvas.mousemove(function(e){
    if(!stillDown) return;
    console.log("moving");
    coords.push({x: e.offsetX, y: e.offsetY});
    // and/or do whatever you need with the coordinates  
}

在鼠标悬停时，取消设置标志：

canvas.mouseup(function(){
    stillDown = false;
});

---

谢谢！它没有卡在鼠标移动中的原因是它完成后返回的原因。但是，另一个函数到底出了什么问题？是的，如果没有设置标志，它只会中止mousemove内容（还有其他方法可以做到这一点，可能效率更高，但这是可行的）。另一个函数有两个严重的问题：它调用自己（进入无限递归，从不给标志清除的机会）；它还尝试递归地设置一个新的mousemove侦听器，并且每次鼠标按下时都会设置一个新的mousemove侦听器。因此，您的代码基本上是试图创建多个无限循环，这甚至是不可能的，因为浏览器忙于处理单个循环。哎哟。可以当我用这种解释来看待它时，这是有道理的。非常感谢，非常感谢！它没有卡在鼠标移动中的原因是它完成后返回的原因。但是，另一个函数到底出了什么问题？是的，如果没有设置标志，它只会中止mousemove内容（还有其他方法可以做到这一点，可能效率更高，但这是可行的）。另一个函数有两个严重的问题：它调用自己（进入无限递归，从不给标志清除的机会）；它还尝试递归地设置一个新的mousemove侦听器，并且每次鼠标按下时都会设置一个新的mousemove侦听器。因此，您的代码基本上是试图创建多个无限循环，这甚至是不可能的，因为浏览器忙于处理单个循环。哎哟。可以当我用这种解释来看待它时，这是有道理的。谢谢。