html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法

js阻止移动端默认事件，是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为，但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动的偏移量来判断了。

在手机移动端手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，所以要先禁止缩放。

移动端禁止缩放

通过meta元标签来设置。

移动端禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

只禁止横向滚动而不禁止竖向滚动

move:function(event){

//当屏幕有多个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) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动

if(isScrolling === 0){

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

}