在做的这个项目需要给手机的返回键和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监听手机的物理返回键和禁用物理返回键的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
