2. 程式人生 > >移動端JS事件、移動端框架

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

阿新 • • 發佈：2019-01-26 
  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 = 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


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

     
 
  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <meta name="viewport" content="width=device-width 



  
 

    


    
    
js核心基礎之Events事件機制（移動端事件、PC端事件、事件穿透）

     
 
							
							
							PC端 
在pc端，網頁的操作都是用滑鼠的，即響應的都是滑鼠事件，包括mousedown、mouseup、click， 
通常，click事件會在mouseup之後觸發，會在300ms之後，因為，會憑藉這個時間去判斷是否觸發雙擊事件（不準確） 
    1、mo 



  
 

    


    
    
JS判斷移動端還是PC、移動端px轉換成rem、移動端圓角

     
 JS判斷移動端還是PC判斷PC還是移動if(/AppleWebKit.Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|L 



  
 

    


    
    
移動端js事件和庫

     
 site   top   tro   參數設置   als   就會   api   滑動效果   ava   1.touch事件
（1）touchstart    手指放到屏幕觸發（2）touchmove  滑動觸發（3）touchend     離開觸發（4）touchcancel  系統取消touch事 



  
 

    


    
    
Web安全_檔案上傳總結(前端js驗證、後端驗證)

     
  
  
  
 一、檔案上傳思路 
 首先我們通過一個網站上傳一個非法格式的檔案 
  
  在瀏覽載入檔案，但還未點選上傳按鈕時便彈出對話方塊，內容如：只允許上傳.jpg/.jpeg/.png字尾名的檔案，而此時並沒有傳送資料包。 
  如果網頁未彈窗，而在頁面彈窗，則考慮後端驗證 
  
 所以就圍繞前 



  
 

    


    
    
移動端點選事件、滑動事件、長按事件封裝

     
 
window.onload=function(){
    $(".box").swipe(function(){
        this.innerHTML='滑動';
    });
    $(".box").swipeRight(function(){
        this.innerHTML 



  
 

    


    
    
移動端點選事件、滑動不可用的坑~~

     
 
								
								            
						
                前兩天被一個問題坑了一整個下午，準確的說是被自己坑的，最後的結果還是很俗套的找到了原因除錯的時候，為了禁止頁面的滑動觸控事件，監聽了touchmove事件，然後在點選事件找到別的方法禁止掉後，忘掉把滑動 



  
 

    


    
    
js事件、Js中的for循環和事件的關系、this

     
 on()   保存   div   mouseover   pan   代碼   發的   失去   內部   一、js事件 
1、事件
　　用戶在網頁中所觸發的行為
　　鼠標滑動種類很多，鍵盤、表單特列；
　　點擊：onclick
　　鼠標進入：onmouseenter　　　　　　　　鼠標離開：onmous 



  
 

    


    
    
深入淺出：瞭解前後端分離優勢、前後端介面聯調以及優化問題

     
  
  
  
 
  目錄： 
  1. 專案有前後端分離和前後端不分離； 
  2. 前後端介面聯調； 
  3.前端效能優化 ； 
  4.前端安全問題； 
  一、專案有前後端分離和前後端不分離： 
   
  　　在前後端不分離架構中，所有的靜態資源和業務程式碼統一部署在同一臺伺服器上。伺服器接收到 



  
 

    


    
    
細說後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）

     
 前端與後端渲染方式的發展大致經歷了這樣幾個階段：後端模板渲染、客戶端渲染、node 中間層、伺服器端渲染（ssr）。
1. 後端模板渲染
前端與後端最初的渲染方式是後端模板渲染，就是由後端使用模板引擎渲染好 html 後，返回給前端，前端再用 js 去操作 dom 或者渲染其他動態的部分。
這個過程大致分成以 



  
 

    


    
    
細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）

     
 並且   git   開發效率   代碼   情況下   引擎   fin   ive   bubuko   細說後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）
前端與後端渲染方式的發展大致經歷了這樣幾個階段：後端模板渲染、客戶端渲染、node 中間層、服務器端渲染（ssr）。
1. 後端 



  
 

    


    
    
Windows C語言 UDP程式設計 server端（伺服器、客戶端）--初級（簡單版）

     
 
							
							
							UDP協議全稱是使用者資料報協議[1]  ，在網路中它與TCP協議一樣用於處理資料包，是一種無連線的協議。在OSI模型中，在第四層——傳輸層，處於IP協議的上一層。UDP有不提供資料包分組、組裝和不能對資料包進行排序的缺點，也就是說，當報文傳送之後，是無法得知其 



  
 

    


    
    
iOS推送小結（證書的生成、客戶端的開發、服務端的開發）

     
 1.推送過程簡介
     （1）App啟動過程中，使用UIApplication::registerForRemoteNotificationTypes函式與蘋果的APNS伺服器通訊，發出註冊遠端推送的申請。若註冊成功，回撥函式application:(UIApplication *)applicatio 



  
 

    


    
    
js 手機端觸發事事件、javascript手機端/移動端觸發事件

     
 
                

處理Touch事件能讓你跟蹤使用者的每一根手指的位置。你可以繫結以下四種Touch事件：



1
2
3
4



touchstart:  // 手指放到螢幕上的時候觸發 
touchmove:  // 手指在螢幕上移動的時候觸發 
touchend:  // 手指從 



  
 

    


    
    
js移動客戶端--觸控事件 模擬點選、滑屏事件

     
 
                
;(function(doc, win, undefined) {
    "use strict";

    var start = {  //記錄開始的觸點
            x: 0,
            y: 0
        },
        d 



  
 

    


    
    
學習Vue.js之vue移動端框架到底哪家強

     
 outer   import   ati   工作   需要   全部   ctu   ron   上層   官網：https://cn.vuejs.org/
Weex
2016年4月21日，阿裏巴巴在Qcon大會上宣布跨平臺移動開發工具Weex開放內測邀請。
Weex
是一套簡單易用的跨平臺開發方案 



  
 

    


    
    
移動端手勢事件 hammer.JS插件

     
 情況   star   white   tab   nal   手指   專家   向上   描述    

 
 
 
 
 
 
 
 

一、引入hammer.JS
1.下載地址：http://download.csdn.net/detail/webxiaoma/9872249 2.官網地址：http: 



  
 

    


    
    
vue.js 1.0中用v-for遍歷出的li中的@click事件在移動端無效

     
 play   需要   data   class   import   child   exp   ons   rec   在vue.js使用v-for遍歷出的li中的@click事件在移動端無效，在網頁端可以執行，代碼如下

<template>
  <div class="rating- 



  
 

    


    
    
vue.js 添加 fastclick的支持   處理移動端click事件300毫秒延遲

     
 dde   cti   size   引入   click事件   list   col   con   fun   fastclick：處理移動端click事件300毫秒延遲。
1,先執行安裝fastclick的命令
npm install fastclick 
2,在main.js中引入，並綁定到body 



  
 

    


    
    
移動端tap事件(輕擊、輕觸)

     
 float   ()   pca   時間   間隔   amp   click事件   idt   touch   一、問題
①移動端也有click點擊事件，click點擊會延遲200~300ms
②因為點擊的響應過慢，影響了用戶體驗，所以需要解決響應慢的問題
二、解決方案
①使用tap事件：即輕擊，輕敲，