html5 移动终端页面的上下左右滑动问题

  • 内容
  • 评论
  • 相关

在写响应式的html5页面的时候,有时候需要禁止左右滑动,但是允许上下滑动
如果这样做监听

div.addEventListener('touchmove',function(event){
    event.preventDefault();//阻止浏览器的默认事件
})

那么左右也不能滑动了
所以这样做

var xx,yy,XX,YY,swipeX,swipeY ;
 div.addEventListener('touchstart',function(event){
     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 ;
          //上下滑动,使用浏览器默认的上下滑动
      }
  })

评论

0条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注