移動前端javascript事件

時間 2019-12-14

原文原文鏈接

移動端事件：javascript

 1 // 手勢事件
 2 touchstart            //當手指接觸屏幕時觸發
 3 touchmove           //當已經接觸屏幕的手指開始移動後觸發
 4 touchend             //當手指離開屏幕時觸發
 5 touchcancel
 6   
 7 // 觸摸事件
 8 gesturestart          //當兩個手指接觸屏幕時觸發
 9 gesturechange      //當兩個手指接觸屏幕後開始移動時觸發
10 gestureend
11   
12 // 屏幕旋轉事件  
13 onorientationchange    
14   
15 // 檢測觸摸屏幕的手指什麼時候改變方向      
16 orientationchange      
17   
18 // touch事件支持的相關屬性
19 touches        
20 targetTouches      
21 changedTouches             
22 clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)      
23 clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)      
24 screenX　　　 // Relative to the screen       
25 screenY 　　  // Relative to the screen      
26 pageX　　 　　// Relative to the full page (includes scrolling)    
27 pageY　　　　 // Relative to the full page (includes scrolling)    
28 target　　　　 // Node the touch event originated from     
29 identifier　　   // An identifying number, unique to each touch event

屏幕旋轉事件:html

 1 // 判斷屏幕是否旋轉
 2 function orientationChange() {
 3     switch(window.orientation) {
 4     　　case 0: 
 5             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
 6             break;
 7     　　case -90: 
 8             alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
 9             break;
10     　　case 90:   
11             alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
12             break;
13     　　case 180:   
14         　　alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
15         　　break;
16     };
17 };
18 // 添加事件監聽
19 addEventListener('load', function(){
20     orientationChange();
21     window.onorientationchange = orientationChange;
22 });

雙手指滑動事件：前端

1 // 雙手指滑動事件
2 addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},
3             false              // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段)
4 );
5 function twoFingerScroll(ev) {
6           var delta =ev.wheelDelta/120;              //對 delta 值進行判斷(好比正負) ，然後執行相應操做
7           return true;
8 };

在互聯網中，通常用戶都是經過鼠標點擊、鼠標懸停、鼠標離開等執行一些前端的事件，可是在移動前端，用戶倒是經過手指來進行操做。從而衍生出移動前端的手勢事件。鼠標中的click事件雖然也能夠在移動前端進行觸發，但這個事件在移動端會有大約半秒中的延遲。因此通常都不採用。
在移動端的手勢事件通常有四種狀況：
touchstart: 手指放到屏幕上的時候觸發
touchmove: 手指在屏幕上移動的時候觸發
touchend: 手指從屏幕上拿起的時候觸發
touchcancel: 系統取消touch事件的時候觸發。前三者應用很普遍，第四個應用較少。至今所作的項目中，第四項還沒涉及過。若是有人用過，能夠拿出來分享一下。java

一個demo：數組

  1 <!DOCTYPE html>
  2 <html>
  3 <meta charset="utf-8"/>
  4 <meta name="viewport" content="width=480" />
  5 <head>
  6 <style>
  7 #stage{
  8 width:480px;
  9 height:360px;
 10 overflow:hidden;
 11 background-color: black;
 12 }
 13 #bg {
 14 position:relative;
 15 width:480px;
 16 height:360px;
 17 overflow:hidden;
 18 background-color: red;
 19 }
 20  
 21 #phone {
 22 position:absolute;
 23 left:0px;
 24 top:0px;
 25 }
 26 </style>
 27 <title>360°旋轉</title>
 28 </head>
 29 <body style="overflow:hidden;padding:0; margin:0;">
 30 <div id="stage">
 31         <div id="bg">
 32             <img id="phone" src="images/360pic1.jpg" />
 33         </div>
 34     </div>
 35     <span id="toleft">往左轉</span>
 36    <span id="toright">往右轉</span>
 37     
 38 <script type="text/javascript">
 39  var c_i = 1;
 40 var c1=new Array();
 41 //建立數組，i的數量是圖片的總數；進行for循環。
 42 for(var i=1;i<=72;i++){
 43   c1[i]=new Image();
 44   c1[i].src="images/360pic"+i+".jpg";
 45 }
 46  
 47 //定義要360度旋轉的對象
 48 var main_swipe = document.getElementById_x("phone");
 49  
 50 //建立滑動的基本距離和滑動方法屬性。
 51 var defaults = {
 52   threshold: {
 53   x: 10,
 54   y: 30
 55   },
 56   swipeLeft: function() {showPicLeft();},
 57   swipeRight: function() {showPicRight();},
 58 };
 59 //定義初始座標
 60 var originalCoord = { x: 0, y: 0 };
 61 var shiftCoord = { x: 0, y: 0 };
 62 var finalCoord = { x: 0, y: 0 };
 63  
 64 main_swipe.addEventListener("touchstart",function(event) {
 65    
 66   //定義滑動初始時的座標
 67   originalCoord.x = event.targetTouches[0].pageX;
 68   originalCoord.y = event.targetTouches[0].pageY;
 69   shiftCoord.x = event.targetTouches[0].pageX;
 70   shiftCoord.y = event.targetTouches[0].pageY;
 71   finalCoord.x = originalCoord.x;
 72   finalCoord.y = originalCoord.y;
 73    
 74 }, false);
 75  
 76 main_swipe.addEventListener("touchmove",function(event) {
 77    
 78   //定義滑動中的座標
 79   event.preventDefault();
 80   finalCoord.x = event.targetTouches[0].pageX;
 81   finalCoord.y = event.targetTouches[0].pageY;
 82    
 83   //當橫向滑動距離大於5時，則判斷爲有效滑動並執行向左滑動的方法。反之則向向右滑動。
 84   if(finalCoord.x - shiftCoord.x > 5){
 85      window.clearInterval(zidongright);
 86      window.clearInterval(zidongleft);
 87      panduanleft=false;
 88      panduanright=false;
 89      defaults.swipeLeft();
 90      shiftCoord.x = finalCoord.x;
 91    
 92   }else if(finalCoord.x - shiftCoord.x < -5){
 93     
 94     window.clearInterval(zidongright);
 95      window.clearInterval(zidongleft);
 96      panduanleft=false;
 97      panduanright=false;
 98      defaults.swipeRight();
 99      shiftCoord.x = finalCoord.x;
100  
101     }
102 }, false);
103  
104 main_swipe.addEventListener("touchend",function(event) {
105    
106   var changeY = originalCoord.y - finalCoord.y;
107    
108   //滑動結束時，進行座標判斷。並執行向左或是向右的方法
109   if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
110     
111    changeX = originalCoord.x - finalCoord.x;
112     
113    if(changeX > defaults.threshold.x) {
114       window.clearInterval(zidongright);
115       window.clearInterval(zidongleft);
116       panduanleft=false;
117       panduanright=false;
118       defaults.swipeRight();
119    }
120     
121    if(changeX < (defaults.threshold.x*-1)) {
122       window.clearInterval(zidongright);
123       window.clearInterval(zidongleft);
124       panduanleft=false;
125       panduanright=false;
126       defaults.swipeLeft();
127    }
128   }
129 }
130 , false);
131  
132 //向左滑動方法
133 var showPicLeft = function(){
134   c_i--;
135   if(c_i < 0){
136    c_i = 72;
137    };
138   document.getElementById_x("phone").src = c1[c_i].src;
139 }
140  
141 //向右滑動方法
142 var showPicRight = function(){
143   c_i++;
144   if(c_i > 72){
145     c_i = 1;
146   };
147   document.getElementById_x("phone").src = c1[c_i].src;
148 }
149  
150 var zidongleft;
151 var zidongright;
152 var panduanleft=false;
153 var panduanright=false;
154  
155 //添加向左自動滑動功能
156 document.getElementById_x("toleft").addEventListener("touchstart",function(event){
157    window.clearInterval(zidongright);
158    if(panduanleft==false){
159      zidongleft=setInterval(function(){defaults.swipeLeft()},50);
160      }
161    panduanleft=true;
162    panduanright=false;
163 },false);
164    
165 //添加向右自動滑動功能 
166 document.getElementById_x("toright").addEventListener("touchstart",function(event){
167     window.clearInterval(zidongleft);
168     if(panduanright==false){
169       zidongright=setInterval(function(){defaults.swipeRight()},50);
170       }
171     panduanright=true;
172     panduanleft=false;
173 },false);
174  
175 </script>
176 </body>
177 </html>

代碼中，定義了一個元素main_swipe，這個元素就是要進行手勢操做的對象。瀏覽器

 1 main_swipe.addEventListener("touchstart",function(event) {
 2    
 3   //定義滑動初始時的座標
 4   originalCoord.x = event.targetTouches[0].pageX;
 5   originalCoord.y = event.targetTouches[0].pageY;
 6   shiftCoord.x = event.targetTouches[0].pageX;
 7   shiftCoord.y = event.targetTouches[0].pageY;
 8   finalCoord.x = originalCoord.x;
 9   finalCoord.y = originalCoord.y;
10    
11 }, false);
12 [/run]咱們爲這個對象添加監聽事件，touchstart就是表示當手指剛放到屏幕上就觸發，經過event對象咱們能夠獲取當前觸摸點的座標。
13 即event.targetTouches[0].pageX; event.targetTouches[0].pageY;
14 其中event.targetTouches是一個包含觸摸數據的數組。其默認的數組第一項就是當前的座標集合。
15 經過event.targetTouches[0].pageX; event.targetTouches[0].pageY;
16 這樣，咱們就能夠獲取到當前觸摸點的X和Y座標。
17  
18 接下來咱們爲了繼續獲取該元素的觸摸移動中的座標就要添加touchmove的事件。1
19 main_swipe.addEventListener("touchmove",function(event) {
20    
21   //定義滑動中的座標
22   event.preventDefault();
23   finalCoord.x = event.targetTouches[0].pageX;
24   finalCoord.y = event.targetTouches[0].pageY;
25    
26   //當橫向滑動距離大於5時，則判斷爲有效滑動並執行向左滑動的方法。反之則向向右滑動。
27   if(finalCoord.x - shiftCoord.x > 5){
28      window.clearInterval(zidongright);
29      window.clearInterval(zidongleft);
30      panduanleft=false;
31      panduanright=false;
32      defaults.swipeLeft();
33      shiftCoord.x = finalCoord.x;
34    
35   }else if(finalCoord.x - shiftCoord.x < -5){
36     
37      window.clearInterval(zidongright);
38      window.clearInterval(zidongleft);
39      panduanleft=false;
40      panduanright=false;
41      defaults.swipeRight();
42      shiftCoord.x = finalCoord.x;
43  
44     }
45 }, false);

注意，在獲取觸摸移動中的座標的時候，必定要先把瀏覽器的默認行爲禁止 event.preventDefault();
觸摸移動中的獲取的座標方法同觸摸開始的方法是同樣的。這裏就不在繼續闡述。
經過條件判斷，當touchmove時的X座標大於touchstart時的X座標，則證實用戶向右滑動，反之則向左滑動。
經過這個判斷來執行defaults.swipeRight();或是defaults.swipeLeft();。從而實現360°旋轉的功能。ide

當手指離開屏幕時，即touchend。一樣要獲取離開的座標，以便爲下一次touchstart來進行座標定義。spa

 1 main_swipe.addEventListener("touchend",function(event) {
 2    var changeY = originalCoord.y - finalCoord.y;
 3    
 4   //滑動結束時，進行座標判斷。並執行向左或是向右的方法
 5   if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
 6     
 7    changeX = originalCoord.x - finalCoord.x;
 8     
 9    if(changeX > defaults.threshold.x) {
10       window.clearInterval(zidongright);
11       window.clearInterval(zidongleft);
12       panduanleft=false;
13       panduanright=false;
14       defaults.swipeRight();
15    }
16     
17    if(changeX < (defaults.threshold.x*-1)) {
18       window.clearInterval(zidongright);
19       window.clearInterval(zidongleft);
20       panduanleft=false;
21       panduanright=false;
22       defaults.swipeLeft();
23    }
24   }
25 }
26 , false);