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

在写响应式的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]

Avatar photo

About Blackford

这是个最好的时代,这是个最坏的时代,这是个充满希望的春天,这是个令人绝望的冬天,我们前面什么都有,我们前面什么都没有。梦想,让我们一次次的走远,又一次次的回头,一个关于人生的梦想还在不断奔跑,带着喜悦和疼痛,不过一切才刚刚开始,并且直到今天也远远没有结束
This entry was posted in 前端设计. Bookmark the permalink.

发表评论

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