js判斷鼠標點擊並移動的方向。

解題思路:
   首先移動有四個方向,爲:上、右、下、左。
   我們需要獲取鼠標點下時,獲取一次鼠標的位置,即鼠標的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("位置沒變");
            }
            
        }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章