注意:无法使用touchend来获取clientX，touchend是在用户滑动结束之后才回调
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#touchDiv,#touchDiv2{
height: 500px;
width: 500px;
background-color: red;
}
#touchDiv2{
background-color: blue;
}
</style>
</head>
<body>
<div id="touchDiv"></div>
<div id="touchDiv2"></div>
<script type="text/javascript">
function TouchObj(touchEle, offset,prev,next) {
this.touchEle = touchEle;
this.startX;
this.endX;
this.prev=prev;
this.next=next;
this.offset = offset;
this.init(this);
}
TouchObj.prototype.init = function(this_) {
this.touchEle.addEventListener('touchstart',function(e){
this_.startX=e.touches[0].clientX;
});
this.touchEle.addEventListener('touchmove',function(e){
this_.endX=e.touches[0].clientX;
});
this.touchEle.addEventListener('touchend',function(e){
distance=Math.abs(this_.startX-this_.endX);
if(distance>this_.offset){
this_.startX>this_.endX?eval(this_.next):eval(this_.prev);
}
});
};
window.onload=function(){
var touchTest2 = new TouchObj(document.getElementById('touchDiv'),50,"console.log('prev')","console.log('next')"),
touchTest3 = new TouchObj(document.getElementById('touchDiv2'),50,"console.log('prev1')","console.log('next2')");
};
</script>
</body>
</html>