阻止移动端H5开发浏览器默认左右滑动行为
责任编辑:梦想飞行     时间:2022-12-12     来源:原创
责任编辑:梦想飞行
时间:2022-12-12  来源:原创
分类: 技术分享
浏览量: 580

阻止移动端H5开发浏览器默认左右滑动行为的办法有两个:

1. css属性touch-action进行控制。


html{
    touch-action:none;
    touch-action:pan-y;
}

2. 使用js监听touch事件,使用event.preventDefault()阻止浏览器的默认行为。


var startX,startY;

document.addEventListener("touchstart",function(e){

startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});

document.addEventListener("touchmove",function(e){

var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;

if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
e.preventDefault();
}
},{passive:false});


来源:原创

回复:

Copyright © 2021 .长沙麦涛网络科技有限公司 All rights reserved. 湘ICP备20015126号-2
联系我们