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

    moto66@163.com       0144586wei 郭 2015/3/23 星期一 9:29:38 服务器密码:0144586Wei120.26.62.247

  2. coding菜鸟养成记

    http://www.cnblogs.com/xdp-gacl/category/563690.html http://www.cnblogs.com/vincent-blog/p/4402327.h ...

  3. MonkeyRecorder

    http://www.cnblogs.com/lynn-li/p/5894953.html

  4. onethink的熟悉

    2014.07.14 下载后,并安装成功! 发现一个安装的问题.安装时,无法直接成功. 修改Url 直接跳到最后一步,实现了安装.去官网查询,发现是程序的问题. 尝试构建企业官网. 首先 实现一个企业 ...

  5. Object修改链表

    以前学习过链表的时候由于类型的接收不同,每次要重写链表 下面修改可用链表 class Link{ private class Node{ private Object data ; private N ...

  6. 10.TCP连接的建立与终止

      1.建立连接协议 (1)请求端发送一个SYN段指明客户打算连接的服务器的端口,移机初始序号ISN.这个SYN段为报文段1. (2)服务器发回包含服务器的初始序号的SYN报文段作为应答.同时,将确认 ...

  7. 黄聪：VPS用轻松备份工具备份Wordpress，文件夹通配符

    db;log;wp-admin;wp-includes;temp;upgrade;twentyfourteen;twentyfifteen;twentysixteen;twentythirteen;t ...

  8. dev中TreeList的应用(转)

    如果需要在单元格添加时则用TreeList如果只是单纯读取数据或检索数据时则用GridControl 1.如果点击添加 时则添加TreeList的节点: protected internal void ...

  9. Delphi基本图像处理方法汇总

    这篇文章主要介绍了Delphi基本图像处理方法,实例汇总了Delphi操作图像实现浮雕.反色.模糊.翻转等常用效果的方法,非常具有实用价值,需要的朋友可以参考下   本文实例汇总了Delphi基本图像 ...

  10. js原生设计模式——4安全的工厂方法模式之Factory方法模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...