所谓:手指事件是我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,写得不好,望海涵( ̄┬ ̄;)我会加油的