关于手指事件的二三事（其一）

所谓：手指事件是我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，写得不好，望海涵(￣┬￣；)我会加油的