在做的這個項目需要給手機的返回鍵和app內的返回鍵附相同的效果，比如說提示等等。
這樣的話就需要監(jiān)聽一下手機物理返回事件了。

這是原創(chuàng)作者的鏈接，分享給大家:
https://blog.csdn.net/weixin_44903107/article/details/105257437

我自己試了試有效果的，上源碼

// 點擊取消返回上一級
$(".footer button:first-child").on("click", function() {
    history.go(-1)  // 這里是通過改變history來觸發(fā)popstate
})
            
// 手機原生返回事件的監(jiān)聽
function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, null, "#");
}
// 默認執(zhí)行該函數(shù)添加一條history
pushHistory();
window.addEventListener("popstate", function(e) {
    // 如果監(jiān)聽到返回，上級頁面
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，數(shù)據(jù)將全部清空', '提示', btnArray, function(e) {
        if (e.index == 1) {
            history.go(-1)  // explain
        } else {
            mui.alert("返回已取消", "提示")
            pushHistory();
        }
    })
}, false);

現(xiàn)在不論是手機的物理返回鍵還是頁面上的返回按鈕，產(chǎn)生的效果都一樣了

注意我加注釋explain的這一行，如果你想要返回的上一級頁面也同樣用了該方法，那么這里的
go(-1)就要變成go(-2)，這樣在你返回的上一級頁面，再次點擊返回，就不會出現(xiàn)兩次提示了。
如果你想要跳上上級頁面（我這里的上上級頁面指的是home頁，也就是再當你再次返回的時候回提示你將推出app的頁面），并且你的二級頁面也用了該方法，那么這里的go(-1),就要變成go(-3)了，其它不變。

但是如果頁面層級比較多，建議還是不要用這種方法，容易出問題，而且添加的history也多。
建議用以下的方法

// 點擊取消返回上一級
$(".footer button:first-child").on("click", function() {
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，數(shù)據(jù)將全部清空', '提示', btnArray, function(e) {
        if (e.index == 1) {
            history.go(-1)
        } else {
            mui.alert("返回已取消", "提示")
        }
    })
})

// 手機原生返回事件的監(jiān)聽
mui.back = function(){
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，數(shù)據(jù)將全部清空', '提示', btnArray, function(e) {
        if (e.index == 1) {
            history.go(-1)
        } else {
            mui.alert("返回已取消", "提示")
        }
    })
}

同樣下面的這段代碼也能夠禁用手機物理返回鍵

window.onload = function(){
    window.addEventListener('popstate', function (e) {
        alert('back');
    });
    window.history.pushState('forward', null, '#'); //在IE中必須得有這兩行
    window.history.forward(1);
}

這是另一種寫法

    XBack = {};
 
    (function(XBack) {
        XBack.STATE = 'x - back';
        XBack.element;
 
        XBack.onPopState = function(event) {
            event.state === XBack.STATE && XBack.fire();
            XBack.record(XBack.STATE); //初始化事件時，push一下
        };
 
        XBack.record = function(state) {
            history.pushState(state, null, location.href);
        };
 
        XBack.fire = function() {
            var event = document.createEvent('Events');
            event.initEvent(XBack.STATE, false, false);
            XBack.element.dispatchEvent(event);
        };
 
        XBack.listen = function(listener) {
            XBack.element.addEventListener(XBack.STATE, listener, false);
        };
 
        XBack.init = function() {
            XBack.element = document.createElement('span');
            window.addEventListener('popstate', XBack.onPopState);
            XBack.record(XBack.STATE);
        };
 
    })(XBack); // 引入這段js文件
 
    XBack.init();
    XBack.listen(function() {
             alert('back')
        });

以上就是js監(jiān)聽手機的物理返回鍵和禁用物理返回鍵的方法了
如果這篇文章對你有幫助，或者在進行中遇到其他問題，歡迎評論區(qū)留言出來。
我們一起探討~