html页面在手机端左右滑动,HTML5 移动端的上下左右滑动问题

在移动端页面上，如果要实现【顶部轮播，手指触摸左右滑动】

我的方案是，通过监听滑动，阻止默认事件来完成

div.addEventListener('touchmove',function(event){

event.preventDefault();//阻止浏览器的默认事件

})

这样，左右滑动可以完成了，但是触摸这个div的时候，页面不能上下滑动了，怎么办？

问题已经解决了，思路是

var xx,yy,XX,YY,swipeX,swipeY ;

div.addEventListener('touchstart',function(event){

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止浏览器默认事件

xx = event.targetTouches[0].screenX ;

yy = event.targetTouches[0].screenY ;

swipeX = true;

swipeY = true ;

})

div.addEventListener('touchmove',function(event){

XX = event.targetTouches[0].screenX ;

YY = event.targetTouches[0].screenY ;

if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0) //左右滑动

{

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止浏览器默认事件

swipeY = false ;

//左右滑动

}

else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){ //上下滑动

swipeX = false ;

//上下滑动，使用浏览器默认的上下滑动

}

})

div.addEventListener('touchend',function(event){

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止浏览器默认事件

})