做手机开发时候，简单想用一些动作，如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. 25、手把手教你Extjs5（二十五）Extjs5常用组件--form的基本用法

    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...

  2. MySQL的char和varchar

    一.VARCHAR与CHAR字符型数据的差异 在MySQL数据库中,用的最多的字符型数据类型就是Varchar和Char,这两种数据类型虽然都是用来存放字符型数据,但是无论从结构还是从数据的保存方式来 ...

  3. tableview的reloadData应注意

    http://blog.csdn.net/ouyangtianhan/article/details/7835041 http://stackoverflow.com/questions/160715 ...

  4. bzoj3110: [Zjoi2013]K大数查询 【cdq分治&树套树】

    模板题,折腾了许久. cqd分治整体二分,感觉像是把询问分到答案上. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = ...

  5. 【转】10款GitHub上最火爆的国产开源项目

    将开源做到极致,提高效率方便更多用户 接触开源时间虽然比较短但是后续会努力为开源社区贡献自己微薄的力量 衡量一个开源产品好不好,看看产品在 GitHub 的 Star 数量就知道了.由此可见,GitH ...

  6. 深入理解yield(转)

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法.只是粗略的知道yield可以用来为一个函数返回值塞数据,比如下面的例子: def addlist(a ...

  7. oracle系列--级联删除和级联更新

    必须声明:此博客转载于Oracle外键级联删除和级联更新http://www.2cto.com/database/201507/417496.html 鉴于此前收藏的精彩博客无料被删除了,很是痛心,所 ...

  8. loading.io一个可以直接生成loading gif图标的站点

    官网是:http://loading.io/ 进去后,可以拖动左图大小,然后点右边的make gif就可以自动生成所选大小的gif图标了,生成后会弹出一个download窗,点download下载即可 ...

  9. 【转】sql语句的优化分析

    开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语句设计不合理 没有相应的索 ...

  10. 冒泡排序法-java案例详解

    /** * 功能:冒泡排序法 * 思想:通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码, * ,若发现逆序这交换,使得排序码较小的元素逐渐从后部移向前部(从下标较大的单元移 ...