[英]Javascript mouseup and mousedown event
我試圖將一張卡片的圖像拖放到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();
});
});
};
greaterX
, lessX
在mousedown
函數內部定義為var
,這意味着它們的范圍僅限於mousedown
函數。
因此,在mouseup
函數中嘗試將它們設置回false
是沒有用的。 您需要在函數的主要部分中聲明變量:
function main() {
var greaterX, lessX, greaterY, lessY;
var ctx = cvs.getContext("2D");
//etc...
現在,僅將greaterX
, lessX
等設置回false是不夠的,因為mousedown
內部的mousemove
事件檢查器仍然處於活動狀態。 當您應用事件監聽器時,它會一直保留在那里直到您將其刪除。
因此,下一步是將mousemove
事件函數分離為其自己的函數(我使用“ mouseMoveHandler”作為名稱),並在mouseup
內部使用.removeEventListener(type, listener, useCapture)
刪除事件偵聽器。
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 ,但不使用您的圖像。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.