简易封装手机浏览器touch事件
做手机开发时候，简单想用一些动作，如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事件的更多相关文章
- 手机触摸touch事件
1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- 手机的touch事件(基于jquery)
javascript代码: $.swipe=function(opt){ var o = $.extend({ mainSelector:"", swipeLe ...
- 对于移动端浏览器touch事件的研究总结（4）判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- 移动端浏览器touch事件的研究总结
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- UC浏览器中touch事件的异常记录
以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- 手机touch事件及参数【转】（自己懒得写了，找了一篇摘过来）
[html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...
随机推荐
- android 点滴记录
1.AndroidM环境下,在framework层添加代码会对jar包的package name进行检查,并提示”unknown package name of class file”怎么解决? 产生 ...
- 利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开（转）
源:利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开 //---------------------------------------------------------------- ...
- STM32中的位带(bit-band)操作（转）
源:STM32中的位带(bit-band)操作 支持了位带操作后,可以使用普通的加载/存储指令来对单一的比特进行读写.在 CM3 中,有两个区中实现了位带.其中一个是 SRAM 区的最低 1MB 范围 ...
- jenkins 构建时，取消构建测试类
如图 点击配置,添加clean install -Dmaven.test.skip=true 保存即可
- IOS开发根据字体大小等获取文字所占的高度
Model *model = self.modelArr[indexPath.row]; //根据label文字获取CGRect NSMutableParagraphStyle *paragraphS ...
- JavaWeb：EL & JSTL
EL:全名为 Expression Language 1.语法:${sessionScope.user.sex}(从Session 的范围中,取得用户的性别), 所有的EL 都是以 ${ 为起始,以 ...
- MyEclipse 显示行标
方法一:在行的显示行标位置(行前),右键->Show Line numbers 方法二:Window->preferences->General->editor->tex ...
- 黄聪：VPS用轻松备份工具备份Wordpress，文件夹通配符
db;log;wp-admin;wp-includes;temp;upgrade;twentyfourteen;twentyfifteen;twentysixteen;twentythirteen;t ...
- 前端程序员应该知道的 15 个 jQuery 小技巧
下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...
- MySQL 安装 5.0
MySQL免安装版配置 1.下载 MySQL 免安装版 2.将 MySQL 解压到待安装目录,使用%MYSQL_HOME%表示 3.打开文件my-huge.ini另存为my.ini,在my.ini文件 ...