js监听手机的物理返回键和禁用物理返回键

在做的这个项目需要给手机的返回键和app内的返回键附相同的效果，比如说提示等等。
这样的话就需要监听一下手机物理返回事件了。

这是原创作者的链接，分享给大家:
https://blog.csdn.net/weixin_44903107/article/details/105257437

我自己试了试有效果的，上源码

// 点击取消返回上一级
$(".footer button:first-child").on("click", function() {
    history.go(-1)  // 这里是通过改变history来触发popstate
})
            
// 手机原生返回事件的监听
function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, null, "#");
}
// 默认执行该函数添加一条history
pushHistory();
window.addEventListener("popstate", function(e) {
    // 如果监听到返回，上级页面
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，数据将全部清空', '提示', btnArray, function(e) {
        if (e.index == 1) {
            history.go(-1)  // explain
        } else {
            mui.alert("返回已取消", "提示")
            pushHistory();
        }
    })
}, false);

现在不论是手机的物理返回键还是页面上的返回按钮，产生的效果都一样了

注意我加注释explain的这一行，如果你想要返回的上一级页面也同样用了该方法，那么这里的
go(-1)就要变成go(-2)，这样在你返回的上一级页面，再次点击返回，就不会出现两次提示了。
如果你想要跳上上级页面（我这里的上上级页面指的是home页，也就是再当你再次返回的时候回提示你将推出app的页面），并且你的二级页面也用了该方法，那么这里的go(-1),就要变成go(-3)了，其它不变。

但是如果页面层级比较多，建议还是不要用这种方法，容易出问题，而且添加的history也多。
建议用以下的方法

// 点击取消返回上一级
$(".footer button:first-child").on("click", function() {
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，数据将全部清空', '提示', btnArray, function(e) {
        if (e.index == 1) {
            history.go(-1)
        } else {
            mui.alert("返回已取消", "提示")
        }
    })
})

// 手机原生返回事件的监听
mui.back = function(){
    let btnArray = ['否', '是'];
    mui.confirm('返回主界面，数据将全部清空', '提示', 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监听手机的物理返回键和禁用物理返回键的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~