移動端JS事件、移動端框架

時間 2019-12-06

標籤移動事件框架欄目無線简体版

原文原文鏈接

1、移動端的操做方式和PC端是不一樣的，移動端主要是用手指操做，因此有特殊的touch事件，touch事件包括以下幾個事件：

一、手指放到屏幕上時觸發 touchstartcss

二、手指放在屏幕上滑動式觸發 touchmovehtml

三、手指離開屏幕時觸發。 touchendjquery

四、系統取消touch事件的時候觸發，比較少用。 touchcancelgit

每一個事件都有如下列表，好比touchend的targetTouches固然是 0 咯：

touches //位於屏幕上的全部手指的列表
targetTouches //位於該元素上的全部手指的列表
changedTouches //涉及當前事件的全部手指的列表 github

每一個事件有列表，每一個列表還有如下屬性：web

其中座標經常使用pageX,pageY： api

pageX //相對於頁面的 X 座標
pageY //相對於頁面的 Y 座標
clientX //相對於視區的 X 座標
clientY //相對於視區的 Y 座標
screenX //相對於屏幕的 X 座標
screenY //相對於屏幕的 Y 座標
identifier // 當前觸摸點的唯一編號
target //手指所觸摸的 DOM 元素瀏覽器

其餘相關事件：

event.preventDefault（） //阻止觸摸時瀏覽器的縮放、滾動條滾動
var supportTouch = "createTouch" in document //判斷是否支持觸摸事件app

2、移動端通常有三種操做：點擊、滑動、拖動，這三種操做通常是組合使用上面的幾個事件來完成的，全部上面的4個事件通常不多單獨使用，通常是封裝使用來實現這三種操做，也可使用封裝成熟的js庫

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6 <title>無標題文檔</title>
  7 <style>
  8     div{width:100px;height:100px;line-height:100px;margin-bottom:10px;background:red;text-align:center;color:#fff;}
  9 </style>
 10 <script>
 11     /***
 12         @name:觸屏事件
 13         @param {string} element dom元素
 14                {function} fn 事件觸發函數
 15     ***/
 16     
 17     var touchEvent={
 18         
 19         /*單次觸摸事件*/
 20         tap:function(element,fn){
 21             var startTx, startTy;
 22             element.addEventListener('touchstart',function(e){
 23               var touches = e.touches[0];
 24               startTx = touches.clientX;
 25               startTy = touches.clientY;
 26             }, false );
 27             
 28             element.addEventListener('touchend',function(e){
 29               var touches = e.changedTouches[0],
 30               endTx = touches.clientX,
 31               endTy = touches.clientY;
 32               // 在部分設備上 touch 事件比較靈敏，致使按下和鬆開手指時的事件座標會出現一點點變化
 33               if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
 34                 fn();
 35               }
 36             }, false );
 37         },
 38         
 39         /*兩次觸摸事件*/
 40         doubleTap:function(element,fn){
 41             var isTouchEnd = false,
 42             lastTime = 0,
 43             lastTx = null,
 44             lastTy = null,
 45             firstTouchEnd = true,
 46             body = document.body,
 47             dTapTimer, startTx, startTy, startTime;
 48             element.addEventListener( 'touchstart', function(e){
 49               if( dTapTimer ){
 50                 clearTimeout( dTapTimer );
 51                 dTapTimer = null;
 52               }
 53               var touches = e.touches[0];
 54               startTx = touches.clientX;
 55               startTy = touches.clientY;   
 56             }, false );
 57             element.addEventListener( 'touchend',function(e){
 58               var touches = e.changedTouches[0],
 59               endTx = touches.clientX,
 60               endTy = touches.clientY,
 61               now = Date.now(),
 62               duration = now - lastTime;
 63               // 首先要確保能觸發單次的 tap 事件
 64               if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
 65                 // 兩次 tap 的間隔確保在 500 毫秒之內
 66                 if(duration < 301 ){
 67                   // 本次的 tap 位置和上一次的 tap 的位置容許必定範圍內的偏差
 68                   if( lastTx !== null &&
 69                     Math.abs(lastTx - endTx) < 45 &&
 70                     Math.abs(lastTy - endTy) < 45 ){
 71                       firstTouchEnd = true;
 72                       lastTx = lastTy = null;
 73                       fn();
 74                     }
 75                   }
 76                   else{
 77                     lastTx = endTx;
 78                     lastTy = endTy;
 79                   }
 80                 }
 81                 else{
 82                   firstTouchEnd = true;
 83                   lastTx = lastTy = null;
 84                 }
 85                 lastTime = now;
 86               }, false );
 87               // 在 iOS 的 safari 上手指敲擊屏幕的速度過快，
 88               // 有必定的概率會致使第二次不會響應 touchstart 和 touchend 事件
 89               // 同時手指長時間的touch不會觸發click
 90               if(~navigator.userAgent.toLowerCase().indexOf('iphone os')){
 91                 body.addEventListener( 'touchstart', function(e){
 92                   startTime = Date.now();
 93                 }, true );
 94                 body.addEventListener( 'touchend', function(e){
 95                   var noLongTap = Date.now() - startTime < 501;
 96                   if(firstTouchEnd ){
 97                     firstTouchEnd = false;
 98                     if( noLongTap && e.target === element ){
 99                       dTapTimer = setTimeout(function(){
100                         firstTouchEnd = true;
101                         lastTx = lastTy = null;
102                         fn();
103                       },400);
104                     }
105                   }
106                   else{
107                     firstTouchEnd = true;
108                   }
109                 }, true );
110                 // iOS 上手指屢次敲擊屏幕時的速度過快不會觸發 click 事件
111                 element.addEventListener( 'click', function( e ){
112                   if(dTapTimer ){
113                     clearTimeout( dTapTimer );
114                     dTapTimer = null;
115                     firstTouchEnd = true;
116                   }
117                 }, false );
118             }    
119         },
120         
121         /*長按事件*/
122         longTap:function(element,fn){
123             var startTx, startTy, lTapTimer;
124             element.addEventListener( 'touchstart', function( e ){
125               if( lTapTimer ){
126                 clearTimeout( lTapTimer );
127                 lTapTimer = null;
128               }
129               var touches = e.touches[0];
130               startTx = touches.clientX;
131               startTy = touches.clientY;
132               lTapTimer = setTimeout(function(){
133                 fn();
134               }, 1000 );
135               e.preventDefault();
136             }, false );
137             element.addEventListener( 'touchmove', function( e ){
138               var touches = e.touches[0],
139                 endTx = touches.clientX,
140                 endTy = touches.clientY;
141               if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
142                 clearTimeout( lTapTimer );
143                 lTapTimer = null;
144               }
145             }, false );
146             element.addEventListener( 'touchend', function( e ){
147               if( lTapTimer ){
148                 clearTimeout( lTapTimer );
149                 lTapTimer = null;
150               }
151             }, false );    
152         },
153         
154         /*滑屏事件*/
155         swipe:function(element,fn){
156             var isTouchMove, startTx, startTy;
157             element.addEventListener( 'touchstart', function( e ){
158               var touches = e.touches[0];
159               startTx = touches.clientX;
160               startTy = touches.clientY;
161               isTouchMove = false;
162             }, false );
163             element.addEventListener( 'touchmove', function( e ){
164               isTouchMove = true;
165               e.preventDefault();
166             }, false );
167             element.addEventListener( 'touchend', function( e ){
168               if( !isTouchMove ){
169                 return;
170               }
171               var touches = e.changedTouches[0],
172                 endTx = touches.clientX,
173                 endTy = touches.clientY,
174                 distanceX = startTx - endTx
175                 distanceY = startTy - endTy,
176                 isSwipe = false;
177               if( Math.abs(distanceX)>20||Math.abs(distanceY)>20 ){
178                 fn();
179               }
180             }, false );    
181         },
182         
183         /*向上滑動事件*/
184         swipeUp:function(element,fn){
185             var isTouchMove, startTx, startTy;
186             element.addEventListener( 'touchstart', function( e ){
187               var touches = e.touches[0];
188               startTx = touches.clientX;
189               startTy = touches.clientY;
190               isTouchMove = false;
191             }, false );
192             element.addEventListener( 'touchmove', function( e ){
193               isTouchMove = true;
194               e.preventDefault();
195             }, false );
196             element.addEventListener( 'touchend', function( e ){
197               if( !isTouchMove ){
198                 return;
199               }
200               var touches = e.changedTouches[0],
201                 endTx = touches.clientX,
202                 endTy = touches.clientY,
203                 distanceX = startTx - endTx
204                 distanceY = startTy - endTy,
205                 isSwipe = false;
206               if( Math.abs(distanceX) < Math.abs(distanceY) ){
207                   if( distanceY > 20 ){
208                       fn();       
209                       isSwipe = true;
210                   }
211               }
212             }, false );    
213         },
214         
215         /*向下滑動事件*/
216         swipeDown:function(element,fn){
217             var isTouchMove, startTx, startTy;
218             element.addEventListener( 'touchstart', function( e ){
219               var touches = e.touches[0];
220               startTx = touches.clientX;
221               startTy = touches.clientY;
222               isTouchMove = false;
223             }, false );
224             element.addEventListener( 'touchmove', function( e ){
225               isTouchMove = true;
226               e.preventDefault();
227             }, false );
228             element.addEventListener( 'touchend', function( e ){
229               if( !isTouchMove ){
230                 return;
231               }
232               var touches = e.changedTouches[0],
233                 endTx = touches.clientX,
234                 endTy = touches.clientY,
235                 distanceX = startTx - endTx
236                 distanceY = startTy - endTy,
237                 isSwipe = false;
238               if( Math.abs(distanceX) < Math.abs(distanceY) ){
239                   if( distanceY < -20  ){
240                       fn();       
241                       isSwipe = true;
242                   }
243               }
244             }, false );    
245         },
246         
247         /*向左滑動事件*/
248         swipeLeft:function(element,fn){
249             var isTouchMove, startTx, startTy;
250             element.addEventListener( 'touchstart', function( e ){
251               var touches = e.touches[0];
252               startTx = touches.clientX;
253               startTy = touches.clientY;
254               isTouchMove = false;
255             }, false );
256             element.addEventListener( 'touchmove', function( e ){
257               isTouchMove = true;
258               e.preventDefault();
259             }, false );
260             element.addEventListener( 'touchend', function( e ){
261               if( !isTouchMove ){
262                 return;
263               }
264               var touches = e.changedTouches[0],
265                 endTx = touches.clientX,
266                 endTy = touches.clientY,
267                 distanceX = startTx - endTx
268                 distanceY = startTy - endTy,
269                 isSwipe = false;
270               if( Math.abs(distanceX) >= Math.abs(distanceY) ){
271                   if( distanceX > 20  ){
272                       fn();       
273                       isSwipe = true;
274                   }
275               }
276             }, false );    
277         },
278         
279         /*向右滑動事件*/
280         swipeRight:function(element,fn){
281             var isTouchMove, startTx, startTy;
282             element.addEventListener( 'touchstart', function( e ){
283               var touches = e.touches[0];
284               startTx = touches.clientX;
285               startTy = touches.clientY;
286               isTouchMove = false;
287             }, false );
288             element.addEventListener( 'touchmove', function( e ){
289               isTouchMove = true;
290               e.preventDefault();
291             }, false );
292             element.addEventListener( 'touchend', function( e ){
293               if( !isTouchMove ){
294                 return;
295               }
296               var touches = e.changedTouches[0],
297                 endTx = touches.clientX,
298                 endTy = touches.clientY,
299                 distanceX = startTx - endTx
300                 distanceY = startTy - endTy,
301                 isSwipe = false;
302               if( Math.abs(distanceX) >= Math.abs(distanceY) ){
303                   if( distanceX < -20  ){
304                       fn();       
305                       isSwipe = true;
306                   }
307               }
308             }, false );    
309         }
310         
311     }
312 </script>
313 <script>
314     window.onload=function(){
315         var aDiv=document.getElementsByTagName("div");
316         
317         touchEvent.tap(aDiv[0],function(){
318             alert("單次觸摸");
319         })
320         
321         touchEvent.doubleTap(aDiv[1],function(){
322             alert("兩次觸摸");
323         })
324         
325         touchEvent.longTap(aDiv[2],function(){
326             alert("長按");
327         })
328         
329         touchEvent.swipe(document,function(){
330             alert("滑屏了");
331         })
332         
333         touchEvent.swipeUp(document,function(){
334             alert("向上滑屏了");
335         })
336         
337         touchEvent.swipeDown(document,function(){
338             alert("向下滑屏了");
339         })
340         
341         touchEvent.swipeLeft(document,function(){
342             alert("向左滑屏了");
343         })
344         
345         touchEvent.swipeRight(document,function(){
346             alert("向右滑屏了");
347         })
348     }
349     
350 </script>
351 </head>
352 <body>
353     <div class="box1">單次觸摸我</div>
354     <div class="box2">兩次觸摸</div>
355     <div class="box3">長按我</div>
356     <span>試一試在屏幕上任意區域滑動</span>
357 </body>
358 </html>

移動端touch事件封裝

一、移動框架之zeptojs

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫，它與jquery有着相似的API。若是你會用jquery，那麼你也會用zepto。Zepto的一些可選功能是專門針對移動端瀏覽器的;它的最初目標是在移動端提供一個精簡的相似jquery的js庫。

a、zepto官網：http://zeptojs.com/框架

b、zepto中文api：http://www.css88.com/doc/zeptojs_api/

c、zepto包含不少模塊，默認下載版本包含的模塊有Core，Ajax，Event，Form，IE模塊，若是還須要其餘的模塊，能夠自定義構建。

d、zepto自定義構建地址：http://github.e-sites.nl/zeptobulider/

e、touch模塊封裝了針對移動端經常使用的事件，可以使用此模塊進行移動端特定效果開發，這些事件有：

　　e一、tap元素tap的時候觸發，此事件相似click，可是比click快

　　e二、longTap當一個元素被按住超過750ms觸發

　　e三、swipe ，swipeLeft，swipeRight，swipeUp，swipeDown當元素被劃過期觸發。（可選擇給定的方向）

實際應用之手機滑到刪除

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 6     <title>手機端移動刪除</title>
 7 
 8     <link rel="stylesheet" href="../css/reset.css">
 9     <style>
10         .con{
11             width:90%;
12             height:500px;
13             margin:50px auto;
14         }
15         .con ul li{
16             width:100%;
17             height:35px;
18             padding-bottom: 10px;
19             border-bottom:1px solid #ccc;
20             position: relative;
21             overflow: hidden;
22         }
23         .con ul li a{
24             width:86%;
25             margin: 15px 0;
26             position:absolute;
27             left:0;
28             top:0;
29             word-break: break-all;
30             white-space: nowrap;
31             overflow: hidden;
32             text-overflow: ellipsis;
33         }
34         .con ul li span{
35             width:10%;
36             padding:5px 2%;
37             margin-top:10px;
38             text-align: center;
39             position:absolute;
40             right:-14%;
41             color:#fff;
42             background:#c7254e;
43         }
44     </style>
45     <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
46     <script>
47         $(function(){
48             var $li = $(".list li");
49             $li.swipeLeft(function(){
50                 $(this).children().eq(0).animate({left:'-10%'},100);
51                 $(this).children().eq(1).animate({right:0},100);
52             });
53             $li.swipeRight(function(){
54                 $(this).children().eq(0).animate({left:0},100);
55                 $(this).children().eq(1).animate({right:"-10%"},100);
56             });
57             $("li span").tap(function(){
58                 var li =$(this).parent();
59                 li.animate({height:0});
60                 li.remove();
61             })
62         })
63     </script>
64 </head>
65 <body>
66     <div class="con">
67         <ul class="list">
68             <li>
69                 <a href="">北大暑期人氣爆棚 排隊人羣綿延數百米</a>
70                 <span class="del">刪除</span>
71             </li>
72             <li>
73                 <a href="">教育部：經批准兒童可延緩入學，教育部門不得拒收</a>
74                 <span class="del">刪除</span>
75             </li>
76             <li>
77                 <a href="">教育部：高校舉辦運動隊項目數原則上很少於5個</a>
78                 <span class="del">刪除</span>
79             </li>
80             <li>
81                 <a href="">新高考招錄方式：高校與考生之間的「精準匹配」</a>
82                 <span class="del">刪除</span>
83             </li>
84             <li>
85                 <a href="">最拼小學生！兩天「趕場」9個培訓班</a>
86                 <span class="del">刪除</span>
87             </li>
88         </ul>
89     </div>
90 </body>
91 </html>

滑動刪除

二、移動框架之swiper

swiper.js是一款成熟的穩定的應用於PC端和移動端的滑動效果插件，通常用來觸屏焦點圖、觸屏整屏滾動等效果。swiper分爲2x版和3x版，2x版支持低版本瀏覽器（IE7），3x放棄支持低版本瀏覽器。適合應用在移動端。

2x版本中文網址：http://2.swiper.com.cn/

3x版本中文網址：http://www.swiper.com.cn/

Swiper使用方法

1.首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。

若是你的頁面加載了jQuery.js或者zepto.js，你能夠選擇使用更輕便的swiper.jquery.min.js。

2.HTML內容。

3.你可能想要給Swiper定義一個大小，固然不要也行。

4.初始化Swiper：最好是挨着</body>標籤

五、若是不能寫在HTML內容的後面，則須要在頁面加載完成後再初始化。

或者這樣（Jquery和Zepto）

swiper（使用參數）

一、initialSlide：初始索引值，從0開始

二、direction：滑動方向 horizontal vertical

三、speed：滑動速度，單位ms

四、autoplay：設置自動播放及播放時間

五、autoplayDisableOnraction：用戶操做swiper後是否還自動播放，默認是true，再也不自動播放

六、pagination：分頁圓點

七、paginationClickable：分頁圓點是否點擊

八、prevButton：上一頁箭頭

九、nextButton：下一頁箭頭

十、loop：是否首尾銜接

十一、onSlideChangeEnd：回調函數，滑動結束時執行

swiper製做實例：

一、swiper製做移動端焦點圖實例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 6     <title>手機幻燈片</title>
 7     <link rel="stylesheet" href="../css/reset.css">
 8     <link rel="stylesheet" href="../css/swiper.min.css">
 9     <script src="../js/jquery-1.12.4.min.js"></script>
10     <script src="../js/set_root.js"></script>
11     <script src="../js/zepto.min(1).js"></script>
12     <script src="../js/swiper.jquery.min.js"></script>
13     <script>
14         $(function(){
15             var mySwiper = new Swiper ('.swiper-container', {
16                 //滑動方向 horizontal  vertical
17                 direction: 'horizontal',
18                 //是否首尾銜接
19                 loop: true,
20                 // 若是須要分頁器
21                 pagination: '.swiper-pagination',
22                 // 若是須要前進後退按鈕
23                 nextButton: '.swiper-button-next',
24                 prevButton: '.swiper-button-prev',
25                 //初始幻燈片，默認從0開始
26                 initialSlide:1,
27                 //分頁圓點是否能夠點擊
28                 paginationClickable:true,
29                 //設置自動播放及間隔時間
30                 autoplay:3000,
31                 //用戶操做swiper後是否還自動播放，默認是true，再也不自動播放
32                 autoplayDisableOnInteraction:false
33             })
34         })
35     </script>
36     <style>
37         img{
38             width:100%;
39         }
40         .swiper-button-next, .swiper-button-prev{
41             width:13px;
42             height:22px;
43             margin-top:-11px;
44             -moz-background-size: 13px 22px;
45             -webkit-background-size: 13px 22px;
46             -o-background-size: 13px 22px;
47             background-size: 13px 22px;
48         }
49         .swiper-pagination-bullet{
50             width:16px;
51             height:16px;
52         }
53     </style>
54 </head>
55 <body>
56 <div class="swiper-container">
57     <div class="swiper-wrapper">
58         <div class="swiper-slide">
59             <img src="../images/li01.png"  alt="幻燈片圖片01">
60         </div>
61         <div class="swiper-slide">
62             <img src="../images/li02.png" alt="幻燈片圖片02">
63         </div>
64         <div class="swiper-slide">
65             <img src="../images/li03.png" alt="幻燈片圖片03">
66         </div>
67         <div class="swiper-slide">
68             <img src="../images/li04.png" alt="幻燈片圖片03">
69         </div><div class="swiper-slide">
70         <img src="../images/li05.png" alt="幻燈片圖片03">
71     </div>
72 
73     </div>
74     <!-- 小圓點分頁 -->
75     <div class="swiper-pagination"></div>
76     <!-- 上一頁下一頁 -->
77     <div class="swiper-button-prev"></div>
78     <div class="swiper-button-next"></div>
79 </div>
80 
81 </body>
82 </html>