解題思路:
首先移動有四個方向,爲:上、右、下、左。
我們需要獲取鼠標點下時,獲取一次鼠標的位置,即鼠標的X軸和Y軸
可能遇到的問題:
我們在點擊並移動鼠標時,無法保證我們是以直線移動,可能會出現向左移動時Y點可能會上下有所偏移。
問題解決辦法:
我們可以將X軸移動的距離和Y軸的移動距離進行對比做一個模糊判斷,當X軸的距離大於Y軸的移動距離時,我們判定
爲X軸的移動,將Y軸的移動忽略掉
所需判斷的方向:
上--左上--右上
下--左下--右下
左--上左--下左
右--上右--下右
所需變量及方法:
Math.abs(取負數的絕對值)返回正數
首先我們聲明五個變量:var MouseY = 0,MouseX = 0,changeX = 0,changeY = 0;
var X = 0,Y = 0;
MouseY 賦值的是鼠標點下那一刻的Y軸座標
changeY 賦值的是鼠標鬆開那一刻的Y軸座標
Y賦值的是 changeY - MouseY 的值作爲長度比較
MouseX 賦值的是鼠標點下那一刻的X軸座標
changeX 賦值的是鼠標鬆開那一刻的X軸座標
X 賦值的是 changeX - MouseX 的值作爲長度比較
上代碼:
var MouseY = 0,MouseX = 0,changeX = 0,changeY = 0;
var X = 0,Y = 0;
function mouseDown(ev){
var Event = ev || event;
MouseX = Event.clientX;
MouseY = Event.clientY;
}
function mouseUp(ev){
var Event = ev || event;
changeX = Event.clientX;
changeY = Event.clientY;
X = changeX - MouseX;
Y = changeY - MouseY;
if( ( ( (X > 0 && Y < 0) && (X > Math.abs(Y)) ) || ( X > 0 && Y > 0 && X > Y) || (X > 0 && Y == 0)) ){//右移動
console.log("右移動");
}else if( ( (Y > 0 && X < 0) && (Y > Math.abs(X)) ) || ( Y > 0 && X > 0 && Y > X ) || (Y > 0 && X == 0) ){//下移動
console.log("下移動");
}else if( ( (X < 0 && Y > 0) && (Math.abs(X) > Y) ) || ( (X < 0 && Y < 0) && (Math.abs(X) > Math.abs(Y)) ) || (X < 0 && Y == 0) ){//左移動
console.log("左移動");
}else if( ( (Y < 0 && X < 0) && Math.abs(Y) > Math.abs(X) ) || ( (Y < 0 && X > 0) && (Math.abs(Y) > X ) ) || (Y < 0 && X == 0) ){//上移動
console.log("上移動");
}else if(X == 0 && Y == 0){
console.log("位置沒變");
}
}