标签：
在处理移动端的touch事件时，我们可以选择一些插件来处理，比如jquery ui touch punch.js 提供丰富的触摸效果，可以满足移动端的开发，
但是，有些移动端开发中，并不需要如此复杂的效果，例如我们只需知道滑动的距离，向左还是向右，我们可以自己写一些代码来处理touch事件；
以下代码，只在触摸情况下支持，电脑需要chrome模拟手机；
可以改造成自己需要的效果：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>touches</title> <style> body{ font-size:16px; color:red;} #div1{width:100%;height:200px;background:#ccc;font-size:2em;} </style> <script> var xc,yc,x1,x2,y1,y2; function touches(ev){ if(ev.touches.length==1){ var oDiv=document.getElementById(‘div1‘); switch(ev.type){ case ‘touchstart‘: //oDiv.innerHTML=‘Touch start(‘+ev.touches[0].clientX+‘, ‘+ev.touches[0].clientY+‘)‘; ev.preventDefault(); //阻止出现滚动条 x1 = Math.floor(ev.touches[0].clientX); y1 = Math.floor(ev.touches[0].clientY); break; case ‘touchend‘: //oDiv.innerHTML=‘Touch end(‘+ev.changedTouches[0].clientX+‘, ‘+ev.changedTouches[0].clientY+‘)‘; break; case ‘touchmove‘: //oDiv.innerHTML=‘Touch move(‘+ev.changedTouches[0].clientX+‘, ‘+ev.changedTouches[0].clientY+‘)‘; x2 = Math.floor(ev.changedTouches[0].clientX); y2 = Math.floor(ev.changedTouches[0].clientY); xc = x2-x1; yc = y2-y1; oDiv.innerHTML=‘x移动了：‘+xc+‘;y移动了‘+yc; break; } } } document.addEventListener(‘touchstart‘,touches,false); document.addEventListener(‘touchend‘,touches,false); document.addEventListener(‘touchmove‘,touches,false); </script> </head> <body> <div id="div1"></div> <p>需要电脑模拟手机（chrome）</p> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wwlhome/p/4644904.html
