admin管理员组

文章数量:1579086

网上分享的阻止事件 会阻止上下左右所有滚动 下面写的只会阻止左右 不会阻止上下 并且可以知道滑动了多少可以打印distanceX看看滚动值

写了个小例子 左右滑动超过100px 则执行一件事

var startPos = 0,endPos = 0,isScrolling = 0;

document.addEventListener('touchstart',function(event){

startX = event.changedTouches[0].pageX,

startY = event.changedTouches[0].pageY;

var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch

startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值

isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动

}, false);

//解绑事件 web前端开发

document.addEventListener('touchend',function(event){

document.removeEventListener('touchmove',this,false);

document.removeEventListener('touchend',this,false);

}, false);

document.addEventListener('touchmove',function(event){

endX = event.changedTouches[0].pageX,

endY = event.changedTouches[0].pageY;

distanceX = endX-startX;

distanceY = endY-startY;

//当屏幕有多个touch或者页面被缩放过，就不执行move操作

if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;

var touch = event.targetTouches[0];

endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};

isScrolling = Math.abs(endPos.x) 

if(isScrolling === 0){

if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){

if (distanceX > 100) {

alert('yes')

}

}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){

if (distanceX 

alert('yes1')

}

}

event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏

}

}, false);

本文标签： 浏览器事件历史手机js

版权声明：本文标题：谷歌浏览器禁止右滑返回历史_JS阻止手机浏览器左右滑动后退事件 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1727848921a1133401.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。