移动端JS事件移动端框架

Posted 小君君的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端JS事件移动端框架相关的知识，希望对你有一定的参考价值。

一、移动端的操作方式和PC端是不同的，移动端主要是用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

1、手指放到屏幕上时触发   touchstart

2、手指放在屏幕上滑动式触发    touchmove

3、手指离开屏幕时触发。  touchend

4、系统取消touch事件的时候触发，比较少用。  touchcancel

每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：

touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表 

每个事件有列表，每个列表还有以下属性：

其中坐标常用pageX,pageY： 

pageX //相对于页面的 X 坐标 
pageY //相对于页面的 Y 坐标 
clientX //相对于视区的 X 坐标 
clientY //相对于视区的 Y 坐标 
screenX //相对于屏幕的 X 坐标 
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号 
target //手指所触摸的 DOM 元素  

其他相关事件：

event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动 
var supportTouch = "createTouch" in document //判断是否支持触摸事件

二、移动端一般有三种操作：点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的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 以上是关于移动端JS事件移动端框架的主要内容，如果未能解决你的问题，请参考以下文章
 

 移动端——JS


 求助，js如何检测 移动端 网络信号


 js移动端tap事件封装


 移动端开发框架Zepto.js


 移动端网页轮播图


 移动端可以兼容fullpage.js吗