Javascript mouseup和mousedown事件

Question

我想拖放一张卡片的图像在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(); 
         }); 
    }); 
}; 

Answer 1

greaterX，lessX，等等，都与var定义您的mousedown函数内，这意味着他们的范围仅限于mousedown功能。

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

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

现在，简单地设置greaterX，lessX，等回false是不够的，因为mousedown内mousemove事件检查仍然有效。当您应用事件侦听器时，它将一直保持在那里，直到您将其删除。

所以，下一步是将mousemove事件功能分离到它自己的功能（我用“mouseMoveHandler”的名称），并删除使用.removeEventListener(type, listener, useCapture)的mouseup内的事件监听器。

的mousemove功能：

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

的mousedown功能（重要部分）：

if (greaterX === true) { //you need the brackets for multi-line if statements 
     if (greaterY === true) { 
      if (lessX === true) { 
       if (lessY === true) { 
        cvs.addEventListener("mousemove",mouseMoveHandler,false); 
       } 
      } 
     } 
    } 

最后，mouseup功能：

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

这里有一个jsFiddle与解决方案，但不会使用你r图像。