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

做手机开发时候，简单想用一些动作，如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>

转载于:https://www.cnblogs.com/shb190802/p/4071695.html

简易封装手机浏览器touch事件相关推荐

自行封装移动端touch事件
网上查阅也参考了几个示例,感觉有些思路过于繁琐,自己也是刚接触前端的小白(去年),于是,为了锻炼下自己的js水平,决定按自己的思路简单封装下,功能包括如下: touchStart: 触摸开始 swip ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
php 控件手机触控,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件 ...
模拟手机浏览器_简易数据分析 03 | 浏览器中那些不为人知的使用技巧
这是简易数据分析系列的第 3 篇文章. 上文我们安装了 Web Scraper 插件,我相信对于大部分人来说还是很简单的,这篇文章我们说些不一样的内容,讲讲浏览器里那些不被大多数人所知的骚操作. 作为 ...
html5手机触屏效果,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件 ...
JS事件监听手机屏幕触摸事件 Touch
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
Unity发布WebGL后使用手机浏览器打开Touch手指触摸无法响应
unity5.6.5,使用触摸操作对物体进行旋转时 //在浏览器中GetAxis("Mouse X")和GetAxis("Mouse Y")始终为0 Input ...
移动web——touch事件介绍
基本概念 1.在移动web端点击事件或者滑动屏幕.捏合等动作都是由touchstar.touchmove.touchend这三个事件组合在一起使用的 2.click事件在移动端会有0.2秒的延迟,下面 ...
html 触摸屏页面,HTML5触摸屏touch事件使用实例1
1.源码: .divFixed { width: 100px; height: 100px; font-size: 15px; text-align: center; border: 2px soli ...

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

简易封装手机浏览器touch事件相关推荐

最新文章

热门文章