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（学习地址）

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