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

    放了寒假.期末考试折腾了一个月都不会写代码了. 一放寒假就找了套PHP培训的课程 在这做些笔记,系统的学习一下php 2017.1.14 介绍集成环境---wamp Apache服务器根目录 / -- ...

  2. 在阿里云ECS（CentOS6.5）上安装ftp

    安装vsftpd 命令: yum install vsftpd –y 结果: 创建ftp存取文件的目录,用户名,密码 命令: useradd -d /home/ftp -g ftp -s /sbin/ ...

  3. Linux SSL 双向认证 浅解

    请求方的操作:此步骤是为了验证CA的发证过程. 1．生成私钥:     Openssl genrsa 1024 > private.key  生成私钥并保存到private.key文件中    ...

  4. jquery核心功能分析

    作者:zccst 核心功能包括: jQuery是如何定义的,如何调用的,如何扩展的.掌握核心方法是如何实现的,是理解jQuery源码的关键.这里理解了一切豁然开朗. 1,如何定义,即入口 // Def ...

  5. LPC1788的外部中断和GPIO中断

    首先是gpio中断,这一点和1768不同,1768使用的中断时和eint3共用中断通道,到了1788,专门为gpio开辟了中断 #ifndef __JOYPAD_H_ #define __JOYPAD ...

  6. Spring Junit 读取WEB-INF下的配置文件

    假设Spring配置文件为applicationContext.xml 一.Spring配置文件在类路径下面 在Spring的java应用程序中,一般我们的Spring的配置文件都是放在放在类路径下面 ...

  7. 10天学会phpWeChat——第十天：phpWeChat的会员注册、登录以及微信网页开发

    通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...

  8. 拓扑排序（Topological）

    #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<stack&g ...

  9. iOS MVVM 前世今生

    MVVM,Model-View-ViewModel,一个从 MVC 模式中进化而来的设计模式,最早于2005年被微软的 WPF 和 Silverlight 的架构师 John Gossman 提出.

  10. java中集合框架

    java平台提供了一个全新的集合框架."集合框架"主要由一组用来操作对象的接口组成.不同接口描述一组不同数据类型. 在很大程度上,一旦您理解了接口,您就理解了框架.虽然您总要创建接 ...