Html5APP中监听返回事件处理的⽅法⽰例
在使⽤MUI框架的时候，我们经常会⽤到⼀个头部带有.mui-action-back的class
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">货物查询</h1>
</header>
点击该头部的返回标识，则会返回到上⼀个页⾯，
//以下是mui.js中的源码，可以看到，在点击返回的时候，内部做了以下的操作
//$.hook={}是专门⽤于记录浏览的历史的。
$.back = function() {
html5开发示例if (typeof $.options.beforeback === 'function') {
if ($.options.beforeback() === false) {
return;
}
}
$.doAction('backs');
};
$.doAction = function(type, callback) {//返回上⼀个记录
if ($.isFunction(callback)) { //指定了callback
$.each($.hooks[type], callback);
} else { //未指定callback，直接执⾏
$.each($.hooks[type], function(index, hook) {
return !hook.handle();
});
}
};
$.addAction = function(type, hook) {//添加历史记录
var hooks = $.hooks[type];
if (!hooks) {
hooks = [];
}
hook.index = hook.index || 1000;
hooks.push(hook);
hooks.sort(function(a, b) {
return a.index - b.index;
});
$.hooks[type] = hooks;
return $.hooks[type];
};
当我们把H5封装成APP时，我们⽤到的5+接⼝存在webview这⼀个概念，即是⼀个窗⼝。
⽽刚开始我则没有特意去区分这两个概念，所以有时候新建窗⼝打开⽹页，⼜或者有时候直接
通过⽹址来跳转⽐如：location.href。
这样就会导致，在监听⼿机的back按键时，出现了⼀种情况，其场景⼤致是下⾯这样：
1、打开软件进⼊主页(main.html=>HBuilder[webview])【前者表⽰URL的本地访问路径，后者是窗⼝webview的ID】。
2、通过location.href跳转到登录界⾯，⽽并⾮通过创建webview打开。
3、登陆后进⼊功能页⾯，再按返回，⼜返回到了登录页⾯。预期是希望，我登录完后，如果点击⼿机的返回键，直接退出的。为此特意了解了MUI的回退函数，我们可以通过复写这个⽅法来实现
在需要监听的页⾯：
mui.back=function(){
//写你监听返回键后需要做的操作
但是，如果还是按照之前⽹页跳转和创建窗体两种模式混合使⽤会出现意想不到的结果，也就是mui.back只能在⼊⼝⽂件被监听，在其他页⾯或窗体做的监听都不会被触发，全部被⼊⼝⽂件的监听事件mui.back捕获了，只会执⾏⼊⼝⽂件的监听业务逻辑，这样就导致了，在不⾃定义返回事件的时候，我们没法避免返回上⼀个页⾯的尴尬情况：⽐如回退到了登录页⾯，⽽⾃定义返回事件，发现所有的事件都被⼊⼝⽂件监听了。这意味着其他页⾯写mui.back=function(){}是没有意义的。
⽽将所有的跳转页⾯都作为窗体打开，则不会出现以上问题。每个窗⼝都能正常监听mui.back⾃定义的function
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。