js 处理移动端触摸事件

在处理移动端的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>

另外，网上找了一些其他关于处理touch的事件教程：链接如下移动端touch事件