javascript - HTML5 移动端的上下左右滑动问题
在移动端页面上，如果要实现【顶部轮播，手指触摸左右滑动】
我的方案是，通过监听滑动，阻止默认事件来完成
p.addEventListener('touchmove',function(event){
event.preventDefault();//阻止浏览器的默认事件
})这样，左右滑动可以完成了，但是触摸这个p的时候，页面不能上下滑动了，怎么办？
问题已经解决了，思路是
var xx,yy,XX,YY,swipeX,swipeY ;
p.addEventListener('touchstart',function(event){
event.stopPropagation();//阻止冒泡
event.preventDefault();//阻止浏览器默认事件
xx = event.targetTouches[0].screenX ;
yy = event.targetTouches[0].screenY ;
swipeX = true;
swipeY = true ;
})
p.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 ;
//上下滑动，使用浏览器默认的上下滑动
}
})
p.addEventListener('touchend',function(event){
event.stopPropagation();//阻止冒泡
event.preventDefault();//阻止浏览器默认事件
})
