Cordova 后退按钮事件永不触发答案

【问题标题】：Cordova backbutton Event Never FiringCordova 后退按钮事件永不触发
【发布时间】：2015-07-10 21:34:24
【问题描述】：

根据我在deviceready 事件之后使用false 的参数将事件侦听器附加到backbutton 的文档，我将覆盖我的设备后退按钮。

我是这样做的：

// Smart App object
define([
    'routes',
    'cordova',
    'angular',
    'angularRoute',
    'angularResource',
    'angularTouch',
    'config',
    'controllers',
    'services',
    'directives',
    'helpers'
    ], function(appRoute) {
        var oApp = {
            _app: {},

            init: function() {
                console.log('init');
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },

            onDeviceReady: function() {
                console.log('ok device ready');
                document.addEventListener('backbutton', function() {
                    console.error('deviceback start');
                    angular.element('.ng-scope').scope().back();
                    console.error('deviceback end');
                }, false);
                // ...
            }
        // ...

我已经疯狂地弄清楚为什么点击设备按钮不会触发我附加的这个backbutton 事件，我什至没有在控制台中看到console.error 消息。我现在正在 Android 上进行测试，我还没有在任何其他手机操作系统上进行测试。

console.log('ok device ready') 确实触发并且我的应用程序正常运行，设备 backbutton 被覆盖，因为它的默认功能没有发生，但是如上所述，我的功能也没有发生。

我阅读了其他 stackoverflow topcis，他们说 Cordova 版本得到了修复，但我的 Cordova 版本远远落后于他们，我的 .cordova/config.json 文件告诉我：

{
    "lib": {
        "www": {
            "id": "com.tigoenergy.smart",
            "version": "3.5.0"
        }
    }
}

它是3.5，然后我的info.txt 告诉我它是5.0.0：

Node version: v0.10.25

Cordova version: 5.0.0

Config.xml file: 

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"

有人有什么想法吗？

【问题讨论】：

您是否能够准备好设备的 console.logs 并启动 deviceback。
感谢@DeepMehta 设备就绪确实显示在控制台中。 deviceback 开始或完成不显示:(
尝试以通常的方式实现。通常它应该工作。我不明白为什么你的代码不起作用..
尝试使用模拟器或其他设备。
github.com/sabbir456/mf

标签： javascript android cordova

【解决方案1】：

尝试使用使用cordova事件的正常方式。

// device APIs are available
//
function onDeviceReady() {
    // Register the event listener
    document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
    //Add your back button implementation.
}

官方文档here

修改后的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Tigo SMART Installation</title>
<script type="text/javascript" src="apps/installation/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="apps/installation/js/index.js"></script>
<script type="text/javascript" src="apps/installation/js/fastclick.min.js"></script>
<script type="text/javascript" src="apps/installation/js/sha512.js"></script>
<script type="text/javascript" src="bower_components/uri.js/src/URI.min.js"></script>
<script type="text/javascript" src="js/extlogin.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="apps/installation/css/index.css" />

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
    //mycode
    console.log('ok loaded');
    document.addEventListener("deviceready", onDeviceReady, false);
});
// Wait for device API libraries to load
//
/*function onLoad() {
console.warn('ok loaded')
document.addEventListener("deviceready", onDeviceReady, false);
}
*/

// device APIs are available
//
function onDeviceReady() {
// Register the event listener
console.log('ok device ready');
document.addEventListener("backbutton", onBackKeyDown, false);
}

// Handle the back button
//
function onBackKeyDown() {
console.log('ok backey downed');
}

</script>
</head>
<body>

<div ng-view></div>
<script data-main="bin/SmartApp" src="bower_components/requirejs/require.min.js"></script>

<img style="opacity:0;visibility:hidden;" class="loader" src="img/loader.gif" />
</body>
</html>

很少有参考链接here和here

【讨论】：

感谢深，我尝试过这种方式，我复制粘贴：gist.github.com/yajd/d4836a73dc917f842dbe 负载和设备准备就绪，但当我回击时没有任何反应:(
我一般先导入jquery。所以改变你的进口Jquery的顺序，然后是cordova。你也失踪了；在 onLoad 函数中的 console.warn() 之后
非常感谢@Deep 的帮助我对此完全感到困惑，我用这个测试了它，最后加载了cordova，但它仍然没有工作:(gist.github.com/yajd/d4836a73dc917f842dbe/…
非常感谢 Deep 的持续帮助，我把它粘贴了，它说 onLoad 没有定义，但我认为这不会伤害它，因为 ok loaded 和 ok device ready 已被记录。但是当我按下返回按钮时它什么也没做:(
让我们continue this discussion in chat。

【解决方案2】：

问题是我在 iframe 中导入了 cordova.js，即使它已经在父窗口范围内。我不知道它会破坏它，并认为我必须在 iframe 中导入 cordova.js。从 iframe 中删除修复它。

【讨论】：

【解决方案3】：

试试这个

    $(document).ready(function () {

        document.addEventListener("backbutton", onBackKeyDown, false);
    });
    function onBackKeyDown() {
        alert('ok backey downed');
    }

确保这些文件是您页面中的链接

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

【讨论】：