手机端的软件。问题很复杂，我慢慢说。首先是一个滑动门界面。

两个div分别是right和left。通过绝对布局，left在下面，right在上面。

$(document).ready(function(){
var startX,endX,move,aa,mmove;
var right=document.getElementById("right");
right.addEventListener("touchstart",touchStart,false);
right.addEventListener("touchmove",touchMove,false);
right.addEventListener("touchend",touchEnd,false);
function touchStart(event){
var touch=event.touches[0];
startX=touch.pageX;
aa=$("#right").offset().left;
}
function touchMove(event){
var touch=event.touches[0];
endX=touch.pageX;
move=endX-startX;
mmove=move*0.25;
if (event.targetTouches.length == 1) {
event.preventDefault();}
if(aa==0&&move<=200&&move>10){
$("#right").css({left:move+"px"});
$("#left").css({left:-50+mmove+"px"});
}
if(aa==0&&move<0){
$("#right").css({left:"0px"});
$("#left").css({left:"-50px"});
}
if(aa==200&&move>=-200){
$("#right").css({left:200+move+"px"});
$("#left").css({left:0+mmove+"px"});
}
if(aa==200&&move>0){
$("#right").css({left:"200px"});
$("#left"

if(aa==200&&move>0){
$("#right").css({left:"200px"});
$("#left").css({left:"0px"});
}
}
function touchEnd(event){
if(aa==0&&move>70){
$("#right").animate({left:"200px"},100);
$("#left").animate({left:"0px"},100);
}
if(aa==0&&move<=70){
$("#right").animate({left:"0px"},100);
$("#left").animate({left:"-50px"},100);
}
if(aa==200&&move>=-500){
$("#right").animate({left:"0px"},100);
$("#left").animate({left:"-50px"},100);
}
}
});
/*$(document).ready(function(){
$("#pic").click(function(){
$("#right").animate({left:"0px"},100);
$("#left").animate({left:"-50px"},100);
});
});*/
$(document).ready(function(){
var left=document.getElementById("left");
left.addEventListener("touchend",touchEnd,false);
function touchEnd(event){
$("#right").css({left:"0px"});
}
});

当点击left上的任意一个li时，right会滑动到左边距为0 ，但是这个时候，只要再点击right任意一个位置，right就会划开到距离左边距200的地方。为什么呢。

从来没人回答过我的问题，每次都是自己解决。顺便分享一下：滑屏有三个事件，touchstart(手指触摸到屏幕)，touchmove(手指在屏幕滑动)，touchend(手指离开屏幕)，在写touchstart事件时，应该初始化手指滑动距离为0。想了一下午，各种测试才搞清楚原因，在此记录。