Javascript mouseup和mousedown事件

我想拖放一張卡片的圖像在javascript的畫布上，但mouseup事件似乎沒有工作，即使它在main（）內部。一旦卡被選中，它會圍繞着鼠標，但當我放開鼠標時它似乎並沒有放開。我也知道，圖像是從不清除屏幕重複。Javascript mouseup和mousedown事件

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(); 
         }); 
    }); 
};

來源

2012-08-28 CRS

你不能使用JQuery？它會處理他爲你粘貼的所有代碼：http://jqueryui.com/demos/draggable/ –

@Lando OP正在使用Canvas，屏幕上放置的圖像僅使用代碼創建。 jQuery的DOM選擇器將[沒有幫助]（http://jsfiddle.net/SeRcf/）。 – Polyov

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圖像。

來源

2012-08-28 03:25:43 Polyov

我改變了它們，但同樣的問題仍然存在 – CRS

@CRS以同樣的方式定義'offsetX'和'offsetY'，並確保[沒有錯誤]（http://jslint.com）。 – Polyov

與上次相同的結果 – CRS

Javascript mouseup和mousedown事件

回答

相關問題