在写响应式的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年六月 一 二 三 四 五 六 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 -
近期文章