PhoneGap API 之事件处理_双击返回键退出程序

时间：2023-05-26 20:13:56
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery  Mobile  Web 应用程序</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<script type="text/javascript">

    //使用jQuery mobile设置提示框的信息

    function showMyAlert(text) {

        $.mobile.loadingMessageTextVisible = true;

        $.mobile.showPageLoadingMsg("a", text, true);

    }

    //弹出提示框信息的方法，两秒后隐藏

    function myAlert(text) {

        showMyAlert(text);

        setTimeout(hideLoading, 2000);

    }

    //隐藏提示框的方法

    function hideLoading() {

        $.mobile.hidePageLoadingMsg();

    }

    //退出app

    function exitApp() {

        navigator.app.exitApp();

    }

</script>

<script type="text/javascript">

    $(function(){

        document.addEventListener('deviceready',myDeviceready,false);

    })

    function myDeviceready(){

        console.log('设备加载完成');

        document.addEventListener('backbutton',myBackbutton,false);

    }

    //点击返回按钮的事件

    function myBackbutton(){

        //下面的if判断页面是否是id为indexPage的页面如果是才执行，否则执行else的返回上一页

        if ($.mobile.activePage.is('#indexPage')) {

            myAlert('再点击一次退出!');

            document.removeEventListener("backbutton", myBackbutton, false); // 注销返回键

            document.addEventListener("backbutton", exitApp, false);// 通过监听返回键绑定退出事件

            // 3秒后重新注册

            var intervalID = window.setTimeout(function() {

                window.clearTimeout(intervalID);

                document.removeEventListener("backbutton", exitApp, false); // 注销返退出事件

                document.addEventListener("backbutton", myBackbutton, false); // 返回键

            }, 3000);

        }else{

            navigate.app.backHistory();//相当于浏览器的后退

        }

    }

</script>

</head>

<body>

    <div data-role="page" id="indexPage">

        <div data-role="header">

            <h1>PhoneGap实战</h1>

        </div>

        <div data-role="content">

            <a href="#" data-role="button" id="deviceStatus">设备加载中....</a>

            <a href="#" data-role="button" id="deviceCurrentStatus">应用为前台</a>

            <a href="#" data-role="button" id="deviceConectionStatus">连接加载中....</a>

            <a href="#" data-role="button" id="backButtonTouch">返回按钮被按0次</a>

            <a href="#" data-role="button" id="menuButtonTouch">菜单按钮被按0次</a>

            <a href="#" data-role="button" id="batterystatus">电量获取中...</a>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

    </div>

</body>

</html>

相关文章