JS移动端浏览器取消右划后退的几种方法
在开发过程中，发现我们公司所使用的APP有点BUG，在APP中打开网页、H5应用之后，处于首页时，轻微的右划触发了后退事件，导致直接退出网页或者H5应用的页面，这样使得很多需要交互的手势没办法使用。本来这个右划后退事件是不应该出现在第一页的，这个BUG也应该由APP得开发来解决，不过当时这个APP是外包做的，如果更改这些比较麻烦，因此解决问题的任务就由我来了。
在使用某些JS插件（fullpage、swipe等）的时候，我发现这些插件使用过程中居然屏蔽掉了这个事件，这也给了我信心，于是我开始了尝试。
方法一：
直接在需要开发的页面引入fullpage，把所有内容装在fullpage的第一个页面中进行编辑，这样就由fullpage帮我们实现了屏蔽右划后退的事件。
这个方法最简单最暴力，适用于单页面的简单应用。
方法二：
直接屏蔽掉浏览器的后退事件。
<script language="javascript">
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener(\'popstate\', function () {
history.pushState(null, null, document.URL);
});
</script>
这页面中引入这段JS后，一切后退事件都会失效，包括APP顶部自带的那个后退按钮，因此需要慎用。
方法三：
禁止左右划动手势
CSS属性 touch-action （touch-action详解）用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。设置html的touch-action:pan-y，即启用单指垂直平移手势，然而这个方法在PC端模拟的时候可以，在移动端使用的时候却失效。
方法四：
阻止touchmove事件传递，再通过scrollTop来使页面上下滚动
<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（学习地址）
这个插件包含了很多滑动的方法，对于移动端也很友好，用作移动端的页面滑动，效果也可以媲美原生，学习起来也很快。