如何覆盖 Cordova 中的默认后退按钮操作？

Question

我已按照 Cordova 文档中的示例代码覆盖设备后退按钮（使用 ES6），但它无法按预期工作：

const onBackButtonPress = () => {
  console.log('pressed');
};
document.addEventListener('backbutton', onBackButtonPress, false);

当我在 Android 设备上运行应用程序时，我的覆盖代码会被调用，但应用程序也会退出，就像默认的后退按钮操作也被调用一样。

如何防止应用程序在按下后退按钮时退出？

我已经尝试将

e.preventDefault()

添加到

addEventListener

的回调函数中

我在

deviceready

事件触发后执行此操作。

我正在使用 Cordova 7.0.1，我的平台是 cordova-android 6.2.3

Answer 1

我使用如下：

if(cordova.platformId === "android") {
  document.addEventListener("backbutton", function (event) {
    event.preventDefault();
    var confirmStatus = confirm("Do you want to exit?");
    if (confirmStatus === true) {
      navigator.app.exitApp();
    }
    }, false);
}

Answer 2

虽然这里的所有答案都是正确的，但在某些设备上它们仍然不起作用。我在华为 P smart 2019 上遇到了同样的问题，而在华为 MediaPad T3 上一切正常。在我的例子中，窗口焦点是问题所在，它在启动过程中的某个时刻丢失了。

因此，正如其他人所建议的，在设备准备就绪后添加： document.addEventListener('后退按钮', () => {}, false);

此外，在 Java 插件中启动后的某个时刻（在启动屏幕之后）： this.cordova.getActivity().getWindow().getDecorView().requestFocus();

这也是 Cordova 在 CordovaActivity.onResume 中所做的事情。如果您的后退按钮在暂停和恢复应用程序后正常工作，但在此之前不能正常工作，这应该可以解决您的问题。

Answer 3

我在我的应用程序中使用此代码：

document.addEventListener("backbutton", function(e) {
    e.preventDefault();
    return;
}, false);

注意，要在 设备就绪时运行此代码

Answer 4

对于那些使用 React 的人来说，您可能希望覆盖组件内的后退按钮行为。如果您有一个更改函数来向后导航，这可能会有点困难，因为 React 重新渲染可能会产生不良后果。 这是我在这种情况下使用的代码：

function MyComponent(): JSX.Element {
    // ...

    useEffect(() => {
        const handleDeviceBackButton = (event: Event) => {
            event.preventDefault();
            navigateBack();
        };

        document.addEventListener("backbutton", handleDeviceBackButton);

        return () => {
            document.removeEventListener("backbutton", handleDeviceBackButton);
        };
    }, [navigateBack]);

    // ...
}

React 文档

说

：

您的设置函数还可以选择返回

清理函数

。

如果我们使用清理函数来删除监听器，我们就可以避免不需要的重复。 :)