通过html5 touch事件封装手势识别组件
html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能,
这3个事件和pc端的mousedown,mousemove,mouveup非常类似,不同的是touch事件可以有多个点击的点,而鼠标每次只有一个点,我们即然是做组件封装,就要考虑在pc上调试的情况,否则用手机调试非常不方便,通过对mouse事件的处理,可以一套代码同时兼容pc端和移动端。
下面来逐步封装一个滑动手势(swipe)的组件
1.判断是否触摸屏
我们使用能力检测,检测是否支持touchstart事件,就可以知道是否是触摸屏,因为触摸事件可以通过document.ontouchstart=function(){} 这样的方式定义,用in操作符判断即可,对于win8,触屏能力会在navigator对象中生成一个msPointerEnabled属性。
if ('ontouchstart' in window || 'ontouchstart' in document) {
//iOS & android
supportsTouch = true;
} else if(window.navigator.msPointerEnabled) {
//Win8
supportsTouch = true;
}
2.同时兼容鼠标和触摸屏的事件绑定
我们根据上一步的判断,如果支持toucestart就绑定对应的touchstart,touchmove,touchend事件,如果不支持,则绑定对应的3个鼠标事件
if(isSupportTouch()){
el.addEventListener('touchstart',touchStart);
el.addEventListener('touchend',touchEnd);
el.addEventListener('touchmove',touchMove); }else{ el.addEventListener('mousedown',touchStart);
el.addEventListener('mouseup',touchEnd);
el.addEventListener('mousemove',touchMove); }
3.获取点击的点位置信息(兼容鼠标和触摸屏)
从事件参数中可以得到位置信息,如果是鼠标,则通过e.pageX,e.pageY获取点击位置相对于页面根节点的坐标,如果是触摸屏,则e.touches对象是一个点击点位置的数组,包含多个手指的点击位置,我们暂时只处理一只手指的情况,所以取e.touches[0].pageX,e.touches[0].pageY.
function touchStart(e){
var t=e.touches?e.touches[0]:e;
startPoint={x:t.pageX,y:t.pageY}; }
4.判断手指滑动方向
在toucemove事件中判断手指划动,toucemove事件会连续触发,为了过滤掉划动距离太短的无效滑动,我们可以判断pageX和pageY和上一次位置的偏移量超过两个像素才认为是有效事件,然后再判断滑动方向,当前点击位置的(x,y)坐标,减去上一个位置的(x,y)坐标,如果x轴的差值大,就认为是左右滑,如果是y轴的差值大就认为是上下滑,再进一步判断差值 为正数则是左或上,差值为负数则为右或下。代码如下:
function getSwipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >=
Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 >0 ? 'up' : 'down')
}
5.jquery插件封装
为了更方便使用,可以封装成jquery插件,我们常说的jquery对象其实是指继随自jquery原型的对象,jquery的原型是指$.fn,只要扩展$.fn即可,
如$.fn.methodName=function(){//code}
或用$.fn.extend({
methodName:funciton(){//code}
})
完整代码如下:
function TouchEvent(){
var self=this,element=$(this);
var el=element[0],isTouching,isSwipe,startTime,startPoint,currentPoint; if(arguments.length>1){
var eventType=arguments[0];
}
var callback=arguments[arguments.length-1];
function doAction(type,args){
args.type=type;
if(eventType){
if(eventType==type){
callback.call(self,args);
}
}else{
callback.call(self,args);
}
}
function getSwipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >=
Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 >0 ? 'up' : 'down')
}
function isSupportTouch(){
var supportsTouch = false;
if ('ontouchstart' in window || 'ontouchstart' in document) {
//iOS & android
supportsTouch = true;
} else if(window.navigator.msPointerEnabled) {
//Win8
supportsTouch = true;
}
return supportsTouch;
}
function touchStart(e){
isTouching=true;
startTime=new Date();
var t=e.touches?e.touches[0]:e;
startPoint={x:t.pageX,y:t.pageY}; }
function touchMove(e){
if(isTouching){ var t=e.touches?e.touches[0]:e;
var p={x:t.pageX,y:t.pageY};
currentPoint=p;
var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y;
if(Math.abs(x1-x2)>2 || Math.abs(y1-y2)>2){
isSwipe=true;
var direction=getSwipeDirection(x1,x2,y1,y2);
//console.log(direction);
e.direction=direction;
doAction("swipe",e);
} }
}
function touchEnd(e){
isTouching=false;
if(!isSwipe){
e["long"]=new Date()-startTime>1000;
doAction("tap",e);
//console.log("tap");
}else{ var x1=startPoint.x,x2=currentPoint.x,y1=startPoint.y,y2=currentPoint.y;
var direction=getSwipeDirection(x1,x2,y1,y2);
console.log(direction)
doAction("swipeEnd",{direction:direction});
}
isSwipe=false;
}
if(isSupportTouch()){
el.addEventListener('touchstart',touchStart);
el.addEventListener('touchend',touchEnd);
el.addEventListener('touchmove',touchMove);
//el.addEventListener('touchcancel',actionFinsh);
}else{ el.addEventListener('mousedown',touchStart);
el.addEventListener('mouseup',touchEnd);
el.addEventListener('mousemove',touchMove); }
} $.fn.touchEvent = TouchEvent;
通过html5 touch事件封装手势识别组件的更多相关文章
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 手机端touch事件封装
var touchEvent={ /*单次触摸事件*/ tap:function(element,fn){ var startTx, startTy; element.addEventListener ...
- React-Native系列Android——Touch事件原理及状态效果
Native原生相比于Hybrid或H5最大长处是具有流畅和复杂的交互效果,触摸事件便是当中重要一项,包括点击(Click).长按(LongClick).手势(gesture)等. 以最简单常见的点击 ...
- 触摸事件,手势识别(UITouch,UIGestureRecognizer)
触摸发生时,UIWindow会有一个队列来存放所有的触摸事件,然后再把这些事件发送给对应的hit-test view,hit-test view会通过touch的四个函数来接收这些事件. 四个函数分别 ...
- 移动web touch事件
参考:http://www.cnblogs.com/dojo-lzz/p/5452575.html wap中的原生touch 事件,touchstart.touchmove.touchend.touc ...
- javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...
- 简易封装手机浏览器touch事件
做手机开发时候,简单想用一些动作,如touchLeft,touchRight等, 使用其他库文件就要加载很多不必要的东西,流量的浪费 今天简单写了封装touch的库,简单的监听一些逻辑 onTouch ...
随机推荐
- 如何给Sqlite添加复合主键
如果是想两个字段组成一个复合主键的话可以如下.SQL code sqlite> create table t2 ( ...> id1 int , ...> id2 int, ...& ...
- 关于Java构造类与对象的思考
简单记录一下Java构造类与对象时的流程以及this和super对于特殊例子的分析. 首先,接着昨天的问题,我做出了几个变形: Pic1.原版: Pic2.去掉了T.foo方法中的this关键字: P ...
- 如何书写高效的MySQL查询?
How to write efficient MySQL query statements WHERE子句中的书写注意事项 模糊查询(like)时需要注意的事项 索引 字段类型 表连接时的注意事项 其 ...
- Tomcat启动时加载数据到缓存---web.xml中listener加载顺序(例如顺序:1、初始化spring容器,2、初始化线程池,3、加载业务代码,将数据库中数据加载到内存中)
最近公司要做功能迁移,原来的后台使用的Netty,现在要迁移到在uap上,也就是说所有后台的代码不能通过netty写的加载顺序加载了. 问题就来了,怎样让迁移到tomcat的代码按照原来的加载顺序进行 ...
- C++ 11 :override 关键字的使用
override 关键字 作用:在成员函数声明或定义中, override 确保该函数为虚函数并覆写来自基类的虚函数. 位置:函数调用运算符之后,函数体或纯虚函数标识 "= 0" ...
- 继OpenJDK 之后,OpenJFX也将迁移到 Git
导读 近日 OpenJFX 项目负责人 Kevin Rushforth 提交了一份将 OpenJFX 迁移到 GitHub 的提案. OpenJFX 是 JavaFX 的开源实现.JavaFX 是一个 ...
- 51nod 1433:0和5
1433 0和5 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 取消关注 小K手中有n张牌,每张牌上有一个一位数的数, ...
- springboot的maven多模块项目架构微服务搭建——依赖方式的多模块演化为微服务项目
在上一篇依赖方式多模块的基础上对项目进行改造.主要改造user-service项目,service要配置mapper.mybatis及数据库相关的东西,后面的接口消费方user就不再需要了 注意:以下 ...
- mysq8设置编码utf8
设置mysql默认编码utf8 以及其他配置 系统:centos7 vi /etc/my.cnf #红色部分如果以存在则在他的下方添加 [mysql] default-character-set=ut ...
- 【转】R语言主成分分析(PCA)
https://www.cnblogs.com/jin-liang/p/9064020.html 数据的导入 > data=read.csv('F:/R语言工作空间/pca/data.csv') ...