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

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

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

onToucheLeft

onTouchRight

onTouchUp

onTouchDown

onTouch

onLongTouch

等等

js部分

 //简单的touch事件

 //param:elem touch的对象

 function SHBTouch(elem){

     this.elem = elem ;

     this.moveLen = 30 ;//当移动距离大于30，触发onTouchLeft,onTouchRight,onTouchUp,onTouchDown 否则触发onTouch

     this.longTouchTime = 750 ;//当按住元素时间大于750ms，触发onLongTouch

     this.touchObj = {

         startX:0,//起始X

         startY:0,//起始Y

         curX:0,//结束X

         curY:0,//结束Y

         startTime:0//其实时间

     };

     //对元素增加touch事件

     this.elem.addEventListener('touchstart',funTouchStart) ;

     this.elem.addEventListener('touchmove',funTouchMove) ;

     this.elem.addEventListener('touchend',funTouchEnd) ;

     var self = this ;

     function funTouchStart(e){

         e.preventDefault();

         self.touchObj.startX = e.touches[0].screenX ;

         self.touchObj.startY = e.touches[0].screenY ;

         self.touchObj.startTime = (new Date()).getTime();

     }

     function funTouchMove(e){

         e.preventDefault();

         self.touchObj.curX = e.touches[0].screenX ;

         self.touchObj.curY = e.touches[0].screenY ;

     }

     //根据移动距离，和时间判断触发事件

     function funTouchEnd(e){

         e.preventDefault();

         var curTime = (new Date()).getTime();

         if(Math.abs(self.touchObj.curX - self.touchObj.startX) < self.moveLen){

             if(curTime - self.touchObj.startTime > self.longTouchTime){

                 self.onLongTouch() ;

             }else{

                 self.onTouch() ;

             }

         }else if(self.touchObj.curX > self.touchObj.startX){

             self.onTouchRight() ;

         }else if(self.touchObj.curX < self.touchObj.startX){

             self.onTouchLeft() ;

         }

         if(Math.abs(self.touchObj.curY - self.touchObj.startY) < self.moveLen){

             if(curTime - self.touchObj.startTime > self.longTouchTime){

                 self.onLongTouch() ;

             }else{

                 self.onTouch() ;

             }

         }else if(self.touchObj.curY > self.touchObj.startY){

             self.onTouchDown() ;

         }else if(self.touchObj.curY < self.touchObj.startY){

             self.onTouchUp() ;

         }

     }

 }

 SHBTouch.prototype.onTouchLeft = function(){}

 SHBTouch.prototype.onTouchRight = function(){}

 SHBTouch.prototype.onTouchUp = function(){}

 SHBTouch.prototype.onTouchDown = function(){}

 SHBTouch.prototype.onTouch = function(){}

 SHBTouch.prototype.onLongTouch = function(){}

html部分

 <!doctype html>

 <html>

 <head>

 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

 </head>

 <body>

 <div id="myDemo" style="position:absolute;left:0px;top:0px;height:300px;font-size:100px;line-height:300px;-webkit-transition:300ms;">1323123473131</div>

 <script src="lib_shb_touch.js"></script>

 <script>

 var a = document.getElementById('myDemo') ;

 var demo = new SHBTouch(a) ;

 var left = 0 ;

 demo.onTouchLeft = function(){

     left -= 100 ;

     a.style.left = left+"px"

 }

 demo.onTouchRight = function(){

     left += 100 ;

     a.style.left = left+"px"

 }

 </script>

 </html>

简易封装手机浏览器touch事件的更多相关文章

  1. 手机触摸touch事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  2. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  3. 手机的touch事件(基于jquery)

    javascript代码: $.swipe=function(opt){   var o = $.extend({     mainSelector:"",     swipeLe ...

  4. 对于移动端浏览器touch事件的研究总结（4）判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  5. 移动端浏览器touch事件的研究总结

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  6. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  7. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  8. 微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  9. 手机touch事件及参数【转】（自己懒得写了，找了一篇摘过来）

    [html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...

随机推荐

  1. laravel database的事务函数

    laravel的事务使用如下: DB::connection('gvideo')->transaction(function () use ($user_id, $video_id, $acti ...

  2. LPC1768定时器普通定时

    //其他通道的基本定时功能都能在这里实现 void Time0Mr0Init(u32 arr,u32 psc) { LPC_SC->PCONP |= (1<<1);          ...

  3. STM32驱动MPU6050

    轴 MEMS轴 MEMS 加速度计,以及一个可扩展的数字运动处理器 DMP(Digital Motion Processor),可用 I2C 接口连接一个第三方的数字传感器,比如磁力计.扩展之后就可以 ...

  4. 最新 Spring 4.2.2 集成 Quartz Scheduler 2.2.2 任务调度示例

    参考http://blog.csdn.net/defonds/article/details/49496895 本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度. ...

  5. Delphi 与 DirectX

    关于DirectX 在Delphi下的使用 源:Delphi 与 DirectX

  6. cocos2d中box2d讲解一

    在游戏中我们经常要加入物理碰撞等和物理有关的内容,在游戏中加入物理引擎可以使我们的游戏更加真实,为玩家展示一个更真实的世界,cocos2d-x支持两个物理引擎Box2d和Chipmunk,本文介绍bo ...

  7. xml数据传输

  8. iOS 参考 网络书籍

    网络图书: Xcode中的Project和Target: http://book.51cto.com/art/201307/402283.htm

  9. VPS 上ubuntu 里搭建VPN服务器

    根据https://my.oschina.net/isnail/blog/363151里逐步完成,自己本机WIN10连接不成功,VM里面用WIN7连接也不行,找别人试连却成功了,然后自己用手机4G网络 ...

  10. YII 1.0 隐藏单入口index.php 设置路由与伪静态

    隐藏 index.php 保证apache配置文件httpd.conf里的LoadModulerewrite_module modules/mod_rewrite.so开启(去掉#)将相对应目录的Al ...