hbuilder阻止返回退出的另一种方式

最新推荐文章于 2024-06-29 02:17:45 发布

杭杭爸爸

最新推荐文章于 2024-06-29 02:17:45 发布

阅读量636

点赞数

分类专栏：框架、程序系统 PHP WEB开发

本文链接：https://blog.csdn.net/lk419121010221/article/details/118605662

版权

WEB开发同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

PHP

28 篇文章 0 订阅

订阅专栏

框架、程序系统

16 篇文章 0 订阅

订阅专栏

本文介绍了如何在HBuilder的index.html中配置子页面并处理返回事件。通过mui.js库，禁用了默认的返回按钮行为，并自定义了连续两次点击返回键退出应用的功能。此外，还展示了在目标页面中监听并处理返回键的操作，以实现1秒内连续按两次返回键退出应用的逻辑。

摘要由CSDN通过智能技术生成

hbuilder里面的index.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div class="mui-content">
</div>
<script src="js/mui.js"></script>
<script type="text/javascript" charset="utf-8">
 
	    mui.init({
			subpages: [{
			url: 'http://huatuo.abckeji.com/index/user/login',
			id: 'huatuo',
			styles: { 
			top: '0px',
			bottom: '0px'
			},
			tap:false,
			  keyEventBind: {
			    backbutton: false, //关闭back按键监听
			}
			}],
	      
	      });
		  
		  重新覆盖返回事件为空
	      	      mui.back = function() {} 
	   

 
</script>
</body>
</html>

站点目标页面里面插入代码：

<script type="text/javascript" src="/mui.js"></script>
<script>
	 mui.plusReady(function() {
                //首页返回键处理
                //处理逻辑：1秒内，连续两次按返回键，则退出应用；
                var first = null;
                plus.key.addEventListener("backbutton", function() {
                    //首次按键，提示‘再按一次退出应用’
                    if (!first) {
                        first = new Date().getTime();
                         window.history.back(-1);
                        setTimeout(function() {
                            first = null;
                        }, 1000);
                    } else {
                        if (new Date().getTime() - first < 1000) {
                            plus.runtime.quit();
                        }
                    }
                }, false);
            });
 	
 

</script>