所谓：手指事件是我YY出来的，就是指在触屏上发生的一些列事件的总和
前言：本文纪录了我学习手指事件中的感想，以及我是用实现手指滑动的方式，也通过记录加深对这件事的理解，本人才疏学浅不足之处还望指正。
手指事件对于js初学者本就是件难事，有别与click，hover这类事件，关于手指是通过touchstart，touch move，touched三种事件在结合触点位置坐标判断得出结论的，初学的我当时的心情是π__π。
但实际学下来，其实只要有一定的js基础还是╮(╯▽╰)╭
下面就列出两种实现方式，其实原理都是一样的，区别之时用不用jQuery包一层，初学者对js还是挺有依赖的(°□°；)，毕竟这货期的名字都挺短的，像js动不动就getElementById,addEventListener(╬￣皿￣)凸什么鬼
但世界上jQuery在我用来却是有点大，他是一个很好的库，但是我用到的功能其实是比较少的，为此加载一个jQuery其实是占用资源的，而且js还是很好了，随着es5，es6的推出jq也越来越强大了，再说你要用node，绕得开js？所以<(▰˘◡˘▰)>拥抱js
太话唠了Σ( ° △ °|||)︴客观您别走，我上代码还不行吗？！
jQuery方式：
对某对象obj（一定要是jquery对象，粗学者这是个坑(ﾟ皿ﾟﾒ)）
swipeInit = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
//初始化参数，● 3● 初始化可以让你明确需要的变量，利于梳理流程
obj.on('touchstart',function(event) {
swipeInit.sx = event.originalEvent.targetTouches[0].pageX;
//获取初始点的横坐标
swipeInit.sy = event.originalEvent.targetTouches[0].pageY;
//获取初始点的纵坐标
swipeInit.ex = swipeInit.sx;
swipeInit.ey = swipeInit.sy;
});
this.obj.on('touchmove',function(event) {
event.preventDefault();
//静止事件冒泡，(￣∀￣)这个很总要，使手指事件不会被其父级事件影响
swipeInit.ex = event.originalEvent.targetTouches[0].pageX;
//随着手指的移动，改编终点的横坐标
swipeInit.ey = event.originalEvent.targetTouches[0].pageY;
//随着手指的移动，改编终点的纵坐标
});
obj.on('touchend',function(event) {
var changeX = swipeInit.sx - swipeInit.ex;
var changeY = swipeInit.sy - swipeInit.ey;
//移动结束记录下坐标差值
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>swipeInit.y) {
//左右事件,即水平的移动距离超过垂直距离且意动范围足够的，这里必须要超过5
if(changeX > 0) {
//向右移动
};
}else{
//向左移动
};
}
}
});
上下移动大同小异，下次继续拖拽和放大，后续会补充js，写得不好，望海涵(￣┬￣；)我会加油的
网友评论