高学平的网络日志

  • 编程语言
    • PHP服务器脚本
    • Java编程语言
    • Python程序设计
  • 移动开发
    • Android开发
    • IOS开发
  • 架构运维
  • 数据库技术
  • 前端设计
  • 胡言乱语
  • AI
  • 关于我

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

  • Blackford
  • 2015-10-06
  • 0

在写响应式的html5页面的时候,有时候需要禁止左右滑动,但是允许上下滑动
如果这样做监听
[js]
div.addEventListener('touchmove',function(event){
event.preventDefault();//阻止浏览器的默认事件
})
[/js]
那么左右也不能滑动了
所以这样做
[js]
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 ;
//上下滑动,使用浏览器默认的上下滑动
}
})
[/js]

© 2023 高学平的网络日志
Theme by Wing
  • {{ item.name }}
  • {{ item.name }}