phonegap监听backbutton点击事件后，其他页面点击回退键出现无反应现象

最新推荐文章于 2023-11-07 08:39:26 发布

原创最新推荐文章于 2023-11-07 08:39:26 发布 · 3.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#phonegap #backbutton

phonegap 专栏收录该内容

4 篇文章

订阅专栏

文章详细介绍了在使用PhoneGap开发跨页面应用时遇到回退键事件冲突的问题，并提供了通过在每个页面加载cordova.js并初始化来解决此问题的方法。

phonegap版本：4.2.0

问题描述：

比如我们有三个页面，分别是main.html，page1.html，page2.html。我们有这样的需求：当在main.html页面点击回退键时要退出程序（默认是返回上一页），在page1.html或者page2.html上点回退键依然是返回上一页。自然而然，我们想到的是在main.html页面加上回退键监听事件，捕捉到后退出程序。于是我在main.html页面加上了下面的代码

document.addEventListener("backbutton", onBackKeyDown, false);
var shouldExit = false;
function onBackKeyDown() {
    if (shouldExit) {
        navigator.app.exitApp();
    } else {
        shouldExit = true;
        window.plugins.toast.showShortBottom('再点击一次退出程序！', function(){}, function(){});
        setInterval(function(){
            shouldExit = false;
        }, 3000);
    }
}

在main.html页面测试，点击两次返回键退出程序，没问题。

但是，但是。。。我从main.html点击链接跳到page1.html或者page2.html后，再点击回退键竟然回不去了，也就是点击回退键在除了main.html这个页面以外都没反应了！

后来看了下phonegap的代码，发现是这样：

第一次绑定backbutton的监听函数后，cordova.js就会通知app，backbutton事件被重写了，所以不管载入什么页面app默认的backbutton事件都不会触发了，要通过cordova.js告诉app解除backbutton重写。

解决办法：

查了很多资料发现没有很好的解决办法，最后我的解决方法就是在每个页面都载入cordova.js，然后在cordova.js的初始化方法里先解除backbutton事件的重写，这样在没有监听backbutton事件的页面，点击回退键依然会触发默认事件（返回上一页）