简易封装手机浏览器touch事件

最新推荐文章于 2022-10-24 16:04:42 发布

weixin_30832983

最新推荐文章于 2022-10-24 16:04:42 发布

阅读量130

点赞数

原文链接：http://www.cnblogs.com/shb190802/p/4071695.html

版权

做手机开发时候，简单想用一些动作，如touchLeft，touchRight等，

使用其他库文件就要加载很多不必要的东西，流量的浪费

今天简单写了封装touch的库，简单的监听一些逻辑

onToucheLeft

onTouchRight

onTouchUp

onTouchDown

onTouch

onLongTouch

等等

js部分

 1 //简单的touch事件
 2 //param:elem touch的对象
 3 function SHBTouch(elem){
 4     this.elem = elem ;
 5     this.moveLen = 30 ;//当移动距离大于30，触发onTouchLeft,onTouchRight,onTouchUp,onTouchDown 否则触发onTouch
 6     this.longTouchTime = 750 ;//当按住元素时间大于750ms，触发onLongTouch
 7     this.touchObj = {
 8         startX:0,//起始X
 9         startY:0,//起始Y
10         curX:0,//结束X
11         curY:0,//结束Y
12         startTime:0//其实时间
13     };
14     //对元素增加touch事件
15     this.elem.addEventListener('touchstart',funTouchStart) ;
16     this.elem.addEventListener('touchmove',funTouchMove) ;
17     this.elem.addEventListener('touchend',funTouchEnd) ;
18 
19     var self = this ;
20 
21     function funTouchStart(e){
22         e.preventDefault();
23         self.touchObj.startX = e.touches[0].screenX ;
24         self.touchObj.startY = e.touches[0].screenY ;
25         self.touchObj.startTime = (new Date()).getTime();
26     }
27 
28     function funTouchMove(e){
29         e.preventDefault();
30         self.touchObj.curX = e.touches[0].screenX ;
31         self.touchObj.curY = e.touches[0].screenY ;
32     }
33     //根据移动距离，和时间判断触发事件
34     function funTouchEnd(e){
35         e.preventDefault();
36         var curTime = (new Date()).getTime();
37         if(Math.abs(self.touchObj.curX - self.touchObj.startX) < self.moveLen){
38             if(curTime - self.touchObj.startTime > self.longTouchTime){
39                 self.onLongTouch() ;
40             }else{
41                 self.onTouch() ;
42             }
43         }else if(self.touchObj.curX > self.touchObj.startX){
44             self.onTouchRight() ;
45         }else if(self.touchObj.curX < self.touchObj.startX){
46             self.onTouchLeft() ;
47         }
48         if(Math.abs(self.touchObj.curY - self.touchObj.startY) < self.moveLen){
49             if(curTime - self.touchObj.startTime > self.longTouchTime){
50                 self.onLongTouch() ;
51             }else{
52                 self.onTouch() ;
53             }
54         }else if(self.touchObj.curY > self.touchObj.startY){
55             self.onTouchDown() ;
56         }else if(self.touchObj.curY < self.touchObj.startY){
57             self.onTouchUp() ;
58         }
59     }
60 }
61 
62 SHBTouch.prototype.onTouchLeft = function(){}
63 SHBTouch.prototype.onTouchRight = function(){}
64 SHBTouch.prototype.onTouchUp = function(){}
65 SHBTouch.prototype.onTouchDown = function(){}
66 SHBTouch.prototype.onTouch = function(){}
67 SHBTouch.prototype.onLongTouch = function(){}

html部分

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
 5 </head>
 6 <body>
 7 <div id="myDemo" style="position:absolute;left:0px;top:0px;height:300px;font-size:100px;line-height:300px;-webkit-transition:300ms;">1323123473131</div>
 8 <script src="lib_shb_touch.js"></script>
 9 <script>
10 var a = document.getElementById('myDemo') ;
11 var demo = new SHBTouch(a) ;
12 var left = 0 ;
13 demo.onTouchLeft = function(){
14     left -= 100 ;
15     a.style.left = left+"px"
16 }
17 demo.onTouchRight = function(){
18     left += 100 ;
19     a.style.left = left+"px"
20 }
21 </script>
22 </html>