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（學習地址）

　　這個插件包含了很多滑動的方法，對於移動端也很友好，用作移動端的頁面滑動，效果也可以媲美原生，學習起來也很快。