首页 > 代码库 > 移动前端工作的那些事---touch
移动前端工作的那些事---touch
在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况：
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。 前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下。
前三者可以看成是用户操作的一个过程。它们一般都是结合在一起使用。我举个360°旋转的例子，通过代码详细说明一下。
<!DOCTYPE html><html><meta charset="utf-8"/><meta name="viewport" content="width=480" /><head><style>#stage{width:480px;height:360px;overflow:hidden;background-color: black;}#bg {position:relative;width:480px;height:360px;overflow:hidden;background-color: red;}#phone {position:absolute;left:0px;top:0px;}</style><title>360°旋转</title></head><body style="overflow:hidden;padding:0; margin:0;"><div id="stage"> <div id="bg"> <img id="phone" src="http://www.mamicode.com/images/360pic1.jpg" /> </div> </div> <span id="toleft">往左转</span> <span id="toright">往右转</span> <script type="text/javascript"> var c_i = 1;var c1=new Array();//创建数组，i的数量是图片的总数；进行for循环。for(var i=1;i<=72;i++){ c1[i]=new Image(); c1[i].src="http://www.mamicode.com/images/360pic"+i+".jpg";}//定义要360度旋转的对象var main_swipe = document.getElementById_x("phone");//创建滑动的基本距离和滑动方法属性。var defaults = { threshold: { x: 10, y: 30 }, swipeLeft: function() {showPicLeft();}, swipeRight: function() {showPicRight();},};//定义初始坐标var originalCoord = { x: 0, y: 0 };var shiftCoord = { x: 0, y: 0 };var finalCoord = { x: 0, y: 0 };main_swipe.addEventListener("touchstart",function(event) { //定义滑动初始时的坐标 originalCoord.x = event.targetTouches[0].pageX; originalCoord.y = event.targetTouches[0].pageY; shiftCoord.x = event.targetTouches[0].pageX; shiftCoord.y = event.targetTouches[0].pageY; finalCoord.x = originalCoord.x; finalCoord.y = originalCoord.y; }, false);main_swipe.addEventListener("touchmove",function(event) { //定义滑动中的坐标 event.preventDefault(); finalCoord.x = event.targetTouches[0].pageX; finalCoord.y = event.targetTouches[0].pageY; //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。 if(finalCoord.x - shiftCoord.x > 5){ window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeLeft(); shiftCoord.x = finalCoord.x; }else if(finalCoord.x - shiftCoord.x < -5){ window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeRight(); shiftCoord.x = finalCoord.x; }}, false);main_swipe.addEventListener("touchend",function(event) { var changeY = originalCoord.y - finalCoord.y; //滑动结束时，进行坐标判断。并执行向左或是向右的方法 if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { changeX = originalCoord.x - finalCoord.x; if(changeX > defaults.threshold.x) { window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeRight(); } if(changeX < (defaults.threshold.x*-1)) { window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeLeft(); } }}, false);//向左滑动方法var showPicLeft = function(){ c_i--; if(c_i < 0){ c_i = 72; }; document.getElementById_x("phone").src = http://www.mamicode.com/c1[c_i].src;"phone").src = http://www.mamicode.com/c1[c_i].src;"toleft").addEventListener("touchstart",function(event){ window.clearInterval(zidongright); if(panduanleft==false){ zidongleft=setInterval(function(){defaults.swipeLeft()},50); } panduanleft=true; panduanright=false;},false); //添加向右自动滑动功能 document.getElementById_x("toright").addEventListener("touchstart",function(event){ window.clearInterval(zidongleft); if(panduanright==false){ zidongright=setInterval(function(){defaults.swipeRight()},50); } panduanright=true; panduanleft=false;},false);</script></body></html>
代码中，定义了一个元素main_swipe，这个元素就是要进行手势操作的对象。
main_swipe.addEventListener("touchstart",function(event) { //定义滑动初始时的坐标 originalCoord.x = event.targetTouches[0].pageX; originalCoord.y = event.targetTouches[0].pageY; shiftCoord.x = event.targetTouches[0].pageX; shiftCoord.y = event.targetTouches[0].pageY; finalCoord.x = originalCoord.x; finalCoord.y = originalCoord.y; }, false);[/run]我们为这个对象添加监听事件，touchstart就是表示当手指刚放到屏幕上就触发，通过event对象我们可以获取当前触摸点的坐标。即event.targetTouches[0].pageX; event.targetTouches[0].pageY;其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;这样，我们就可以获取到当前触摸点的X和Y坐标。接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。[code]main_swipe.addEventListener("touchmove",function(event) { //定义滑动中的坐标 event.preventDefault(); finalCoord.x = event.targetTouches[0].pageX; finalCoord.y = event.targetTouches[0].pageY; //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。 if(finalCoord.x - shiftCoord.x > 5){ window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeLeft(); shiftCoord.x = finalCoord.x; }else if(finalCoord.x - shiftCoord.x < -5){ window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeRight(); shiftCoord.x = finalCoord.x; }}, false); 注意，在获取触摸移动中的坐标的时候，一定要先把浏览器的默认行为禁止 event.preventDefault();
触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。
通过条件判断，当touchmove时的X坐标大于touchstart时的X坐标，则证明用户向右滑动，反之则向左滑动。
通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。
当手指离开屏幕时，即touchend。同样要获取离开的坐标，以便为下一次touchstart来进行坐标定义。
main_swipe.addEventListener("touchend",function(event) { var changeY = originalCoord.y - finalCoord.y; //滑动结束时，进行坐标判断。并执行向左或是向右的方法 if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { changeX = originalCoord.x - finalCoord.x; if(changeX > defaults.threshold.x) { window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeRight(); } if(changeX < (defaults.threshold.x*-1)) { window.clearInterval(zidongright); window.clearInterval(zidongleft); panduanleft=false; panduanright=false; defaults.swipeLeft(); } }}, false);以上的效果，就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。
移动前端工作的那些事---touch
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。