[转]JS移动端浏览器取消右划后退的几种方法

在开发过程中，发现我们公司所使用的APP有点BUG，在APP中打开网页、H5应用之后，处于首页时，轻微的右划触发了后退事件，导致直接退出网页或者H5应用的页面，这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的，这个BUG也应该由APP得开发来解决，不过当时这个APP是外包做的，如果更改这些比较麻烦，因此解决问题的任务就由我来了。

　　在使用某些JS插件（fullpage、swipe等）的时候，我发现这些插件使用过程中居然屏蔽掉了这个事件，这也给了我信心，于是我开始了尝试。

　　方法一：

?

1 2 3 4 5 6 7 8 9

var mo=function(e){e.preventDefault();}   /***禁止滑动***/   function stop(){ document.addEventListener("touchmove",mo,false);//禁止页面滑动   } stop()

　　

　　这个方法最简单最暴力，适用于单页面的简单应用。

　　方法二：

　　直接屏蔽掉浏览器的后退事件。

?

1 2 3 4 5 6 7

<script language="javascript"> //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); </script>

　　

　　这页面中引入这段JS后，一切后退事件都会失效，包括APP顶部自带的那个后退按钮，因此需要慎用。

　　方法三：

　　禁止左右划动手势

　　CSS属性 de style=”margin: 0px; padding: 0px;” >touch-actionde> （touch-action详解）用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。设置html的touch-action:pan-y，即启用单指垂直平移手势，然而这个方法在PC端模拟的时候可以，在移动端使用的时候却失效。
　　方法四：

　　阻止touchmove事件传递，再通过scrollTop来使页面上下滚动

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script language="javascript"> let self = this; document.addEventListener('touchstart', function (e) { self.moveY = e.targetTouches[0].pageY; }) document.addEventListener('touchmove', function (e){ e.preventDefault(); let moveWidth = self.moveY - e.targetTouches[0].pageY; if (moveWidth !== 0) { document.body.scrollTop += moveWidth; } }) document.addEventListener('touchmove', function (e) { e.preventDefault(); }) </script>

　　

　　这个方法基本已经完美解决了这个问题，只是上下滑动过程中感觉画面渲染有一点点失真，不知道是不是心理作用

　　方法五：

　　使用Iscroll

　　这个插件包含了很多滑动的方法，对于移动端也很友好，用作移动端的页面滑动，效果也可以媲美原生，学习起来也很快。

 

 

转自：https://blog.csdn.net/feifanzhuli/java/article/details/78791033