Javascript mouseup和mousedown事件

我试图在javascript的画布上拖放一张卡片的图像，但mouseup事件似乎不起作用，即使它在main（）中。一旦选择了卡片，它会围绕着鼠标移动，但当我放开鼠标时，它似乎不会松开。我还知道，由于没有清除屏幕，图像会重复出现

function main(){
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = "allcards.png";
var imgX = 75;
var imgY = 75;
draw();

function draw(){
    ctx.drawImage(img,0,0,97,129,imgX,imgY,100,100);    
}

cvs.addEventListener("mouseup", function(ev){
        greaterX = false;
        lessX = false;
        greaterY = false;
        lessY = false;
    }
);

cvs.addEventListener("mousedown", function(ev){
        if(ev.clientX <= (imgX + 97)){
            var greaterX = true;
        }
        if(ev.clientY <= (imgY + 129)){
            var greaterY = true;
        }
        if(ev.clientX >= imgX){
            var lessX = true;
        }
        if(ev.clientY >= imgY){
            var lessY = true;
        }
        if(greaterX == true)
            if(greaterY == true)
                if(lessX == true)
                    if(lessY == true)
                        cvs.addEventListener("mousemove", function(ev){
                            var offsetX = (ev.clientX - imgX);
                            var offsetY = (ev.clientY - imgY);
                            imgX = imgX + offsetX;
                            imgY = imgY + offsetY;
                            draw();
                        });
    });
};

函数main（）{
var ctx=cvs.getContext（“2d”）；
var img=新图像（）；
img.src=“allcards.png”；
var imgX=75；
var-imgY=75；
draw（）；
函数绘图（）{
ctx.drawImage（img，0,0,97129，imgX，imgY，100100）；
}
cvs.addEventListener（“鼠标”，函数（ev）{
greaterX=假；
lessX=假；
大=假；
莱西=假；
}
);
cvs.addEventListener（“鼠标向下”，函数（ev）{
如果（ev.clientX=imgY）{
var-lessY=true；
}
如果（greaterX==true）
if（greaterY==true）
如果（lessX==true）
if（lessY==true）
cvs.addEventListener（“mousemove”，函数（ev）{
var offsetX=（ev.clientX-imgX）；
var offsetY=（ev.clientY-imgY）；
imgX=imgX+offsetX；
imgY=imgY+offsetY；
draw（）；
});
});
};
greaterX
、
lessX
等都是在
mousedown
函数中定义的
var
，这意味着它们的范围仅限于
mousedown
函数

因此，在
mouseup
函数中尝试将它们设置回
false
是没有用的。您需要在函数的主要部分声明变量：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

现在，仅仅将
greaterX
、
lessX
等设置回false是不够的，因为
mousedown
中的
mousemove
事件检查器仍然处于活动状态。应用事件侦听器时，它将一直保留在那里，直到您将其删除

因此，下一步是将
mousemove
事件函数分离为它自己的函数（我使用“mouseMoveHandler”作为名称），并使用
mouseup
的内部删除事件侦听器

mousemove
功能：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

mousedown
功能（重要部分）：

最后是
mouseup
功能：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

这里有一个解决方案，但不使用您的图像。
greaterX
、
lessX
等都是在
mousedown
函数中定义的
var
，这意味着它们的范围仅限于
mousedown
函数

因此，在
mouseup
函数中尝试将它们设置回
false
是没有用的。您需要在函数的主要部分声明变量：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

现在，仅仅将
greaterX
、
lessX
等设置回false是不够的，因为
mousedown
中的
mousemove
事件检查器仍然处于活动状态。应用事件侦听器时，它将一直保留在那里，直到您将其删除

因此，下一步是将
mousemove
事件函数分离为它自己的函数（我使用“mouseMoveHandler”作为名称），并使用
mouseup
的内部删除事件侦听器

mousemove
功能：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

mousedown
功能（重要部分）：

最后是
mouseup
功能：

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

这里有一个解决方案，但不使用您的图像。
您不能使用JQuery吗？？它将为您处理所有的粘合代码：@Lando OP正在使用画布，并且屏幕上的图像仅使用代码创建。jQuery DOM选择器将是。您不能使用jQuery吗？？它将为您处理所有的粘合代码：@Lando OP正在使用画布，并且屏幕上的图像仅使用代码创建。jQueryDOM选择器应该是。我更改了它们，但仍然存在相同的问题persists@CRS以相同的方式定义
offsetX
和
offsetY
，并确保有。我更改了它们，但仍然存在相同的问题persists@CRS以相同的方式定义
offsetX
和
offsetY
，并确保存在。