移动网站中touch触屏事件小结

今天小结一下温州移动网站建设中涉及到的，touch的触屏事件，其包括：

touchstart：触摸开始的时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。

targetTouches：位于当前DOM元素上手指的列表。

changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）

target：DOM元素，是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

直接上案例：

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/zepto_v1_1_6.js"></script>
<script type="text/javascript">  
            //全局变量，触摸开始位置  
            var startX = 0, startY = 0;    
			var win_w,win_h,size,zwidth,pid=0,zPid=0;
			var curID,prevID,nextID;   			
			var p_cx,p_cx_now,p_cy,p_cy_now,p_mar,p_move,p_marY,p_moveY;      
            //touchstart事件  
            function touchSatrtFunc(evt) 
			{  
                try  
                {  
                    evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚
                    var touch = evt.touches[0]; //获取第一个触点  
                    var x = Number(touch.pageX); //页面触点X坐标  
                    var y = Number(touch.pageY); //页面触点Y坐标  
                    //记录触点初始位置  
                    startX = x;  
                    startY = y;    
                    //var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';  
                    //document.getElementById("result").innerHTML = text;  
					var b=evt.touches[0];
					p_cx=b.clientX;//获取初始坐标
					p_cy=b.clientY;
					//alert(p_cy);
					p_mar=parseInt($(".main").css("left"));//获得初始top值
					p_marY=parseInt($(".warp").css("top"));//获得初始top值  
				}  
                catch (e)
				{  
                    alert('touchSatrtFunc：' + e.message);  
                }  
            }    
            //touchmove事件，这个事件无法获取坐标
            function touchMoveFunc(evt) {  
                try  
                {  
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
                    var touch = evt.touches[0]; //获取第一个触点  
                    var x = Number(touch.pageX); //页面触点X坐标  
                    var y = Number(touch.pageY); //页面触点Y坐标    
                    var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';    
                    //判断滑动方向  
                    if (x - startX != 0) {  
                        text += '<br/>左右滑动';  
                    }  
                    if (y - startY != 0) {  
                        text += '<br/>上下滑动';  
                    }    
                    document.getElementById("result").innerHTML = text;  
					
					evt.preventDefault();//锁定系统活动
					
					var b=evt.touches[0];					
					p_cx_now=b.clientX;//获取活动纵坐标
					p_cy_now=b.clientY;
					//alert(p_cy_now);
					p_move=p_cx_now-p_cx;//计算移动距离
					p_moveY=p_cy_now-p_cy;
					
					$(".main").css({"left":p_mar+p_move});
					$(".warp").css({"top":p_marY+p_moveY});
                }  
                catch (e) {  
                    alert('touchMoveFunc：' + e.message);  
                }  
            }    
            //touchend事件  
            function touchEndFunc(evt) 
			{  
                try {  
                    evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动
                    var text = 'TouchEnd事件触发';  
                    //document.getElementById("result").innerHTML = text;  
					//----------------------------------------------------------------横向---滑动距离大于五分之一是开始					 
					if(p_move>win_w/5)  
					{
						//向右移动
						pid=pid-1;
						if(pid<0)
						{
							pid=size-1;//最多上翻到第一页	
						}
					}
					else if(p_move<-win_w/5)
					{
							//向左移动
							pid=pid+1;
							if(pid>size-1)
							{
								pid=0;	//最多下翻到最后一页
							}				
					}
					else
					{
							pid=pid;//不翻页
					}
					$(".main").animate({"left":-win_w*pid},100);
					p_move=0;//重置移动距离
					//alert(p_moveY); 	
					//--------------------------------------------------纵向移动设置				
					if(p_moveY>win_h/3)  
					{
						//向上移动 
						zPid=zPid-1;
						if(zPid<0)
						{
							zPid=zCounts-1;//最多上翻到第一页	
						}
					}
					else if(p_moveY<-win_h/3)
					{
							//向下移动
							zPid=zPid+1;
							if(zPid>zCounts-1)
							{
								zPid=0;	//最多下翻到最后一页
							}				
					}
					else
					{
							zPid=zPid;//不翻页
					}					
					//$(".warp #"+curID).fadeOut("slow");
					$(".warp").animate({"margin-top":-win_h*zPid},100);
					p_moveY=0;//重置移动距离
                }  
                catch (e)
				{  
                    alert('touchEndFunc：' + e.message);  
                }  
				 alert(touch.identifier);
            }  
  
            //绑定事件  
            function bindEvent()
			{  				
				win_w=$(window).width();
				win_h=$(window).height();
				//横向设置
				curID=$(" .main li").parent(".main").parent().attr("rel");
				size=$("#"+ curID +" .main li").size(); 
				
				$(".prodlistDiv").css({"width":win_w,"height":win_h});
				$(".main li").css({"width":win_w,"height":win_h});
				zwidth=win_w*size;
				$(".main").css({"width":zwidth}); 
				//纵向设置
				prevID=$(" .main li").parent(".main").parent().attr("relPrev");
				nextID=$(" .main li").parent(".main").parent().attr("relNext");
				zCounts=$(" .prodlistDiv").size(); 
				zheight=win_h*zCounts;
				$(".warp").css({"height":zheight});
				
				
                document.addEventListener('touchstart', touchSatrtFunc, false);  
                document.addEventListener('touchmove', touchMoveFunc, false);  
                document.addEventListener('touchend', touchEndFunc, false);  
            }    
            //判断是否支持触摸事件  
            function isTouchDevice()
			{  
                document.getElementById("version").innerHTML = navigator.appVersion;    
                try {  
                    document.createEvent("TouchEvent");  
                    //alert("支持TouchEvent事件！");    
                    bindEvent(); //绑定事件  
                }  
                catch (e) {  
                    alert("不支持TouchEvent事件！" + e.message);  
                }  
            }    
            window.onload = isTouchDevice;  
    </script>   
</head>

<body>  
<div id="version"></div>
<div id="result"></div>
<div class="warp">
    <div id="prodlist1" class="prodlistDiv" rel="prodlist1" relNext="prodlist2" relPrev="prodlist1">
        <ul class="main">
            <li class="prodlistLi" id="prodlistLi1" rel="prodlist1">1-1</li>
            <li class="prodlistLi" id="prodlistLi2" rel="prodlist1">1-2</li>
            <li class="prodlistLi" id="prodlistLi3" rel="prodlist1">1-3</li>
            <li class="prodlistLi" id="prodlistLi4" rel="prodlist1">1-4</li>
        </ul>
    </div>
    <div id="prodlist2" class="prodlistDiv" rel="prodlist2" relNext="prodlist3" relPrev="prodlist1">
        <ul class="main">
            <li class="prodlistLi" id="prodlistLi1">2-1</li>
            <li class="prodlistLi" id="prodlistLi2">2-2</li>
            <li class="prodlistLi" id="prodlistLi3">2-3</li>
            <li class="prodlistLi" id="prodlistLi4">2-4</li>
        </ul>
    </div>
</div>

tshinet.com.css样式表：

/* CSS Document */
html,body{width:100%; height:100%; margin:0; padding:0; overflow:hidden; font-size:14px; background-color:#008c23; font-family:Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;}
@media only screen and (max-height:479px){
	body{font-size:12px;}
}

#version,#result{ display:none}

<!--产品列表-->
.warp{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative}
.prodlistDiv{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative}
.prodlistDiv ul{ height:100%; position:relative}
.prodlistDiv ul li{ float:left; height:100%; position:relative}

#prodlist1{ background-color:#090;}
#prodlist2{ background-color:red;}

以上案例经过测试可用，本文有温州网站建设友情提供！