做手机开发时候，简单想用一些动作，如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. function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。

    function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...

  2. Delphi Math里的基本函数，以及浮点数比较函数（转）

    源:Delphi Math里的基本函数,以及浮点数比较函数 Delphi里的好东西太多,多到让人觉得烦.这种感觉就是当年打游戏<英雄无敌3>,改了钱以后,有钱了每天都要造建筑,明明是好事, ...

  3. A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万

    A股暴跌三日市值蒸发4.2万亿 股民人均浮亏超2万 http://finance.qq.com/a/20150508/010324.htm?pgv_ref=aio2015&ptlang=205 ...

  4. Oracle用户管理和角色管理

    原博:http://liwx.iteye.com/blog/1182251 一.创建用户的Profile文件 SQL> create profile student limit // stude ...

  5. 微软2017MVP大礼包拆箱攻略

    容我本周偷个懒,晒个大礼包就糊弄过去了.13号晚上拿到的大礼包,激动的没敢拆,一直等到娃睡着了,才偷偷打开了快递,忍了两天没忍住,上来晒图得瑟一下,请各位轻拍,谢谢! 1.大礼包的盒子(联邦快递的盒子 ...

  6. WGCNA算法研究笔记

    转自:http://www.gogoqq.com/ASPX/8390905/JournalContent/1303140588.aspx 研究了近半年的算法,记录下来给自己一个交代,也应该是考G前地最 ...

  7. iOS 更改启动视图

    TMMainViewCtrl *main = [[TMMainViewCtrl alloc] init]; self.window.rootViewController = main;

  8. m3u8的浏览器播放器

    前几天花了点时间研究了下怎么在浏览器中播放m3u8的视频地址,最后终于找到了两个开源的东西可以正常播放,稍稍整理下方便后来人. m3u8是什么就不介绍了,现在所有视频网站基本都是通过m3u8的方式来播 ...

  9. jquery serialize 和 console 漫谈

    serialize   获取表单中所有的数据 今天刚刚发现这个神奇的东西,顿时感觉高大上了很多,比以前一个一个用 val()取出来值  ,然后再 ajax 方便多了 代码示例 $(document). ...

  10. jQuery 获取和设置type为hidden的input的值

    HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...