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

lpwwtiir  于 2023-10-24  发布在  其他
关注(0)|答案(4)|浏览(216)

我已经按照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

vvppvyoh

vvppvyoh1#

我使用如下:

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);
}
66bbxpm5

66bbxpm52#

虽然这里的所有答案都是正确的,在某些设备上它们仍然不工作.我在华为P智能2019上遇到了同样的问题,而华为MediaPad T3上的一切都正常工作.在我的情况下窗口焦点是问题,它在启动过程中的某个时候丢失了.
所以就像其他人建议的那样,在设备就绪后添加这个:document. addEventList('backbutton',()=> {},false);
此外,在Java插件启动后的某个时间点(在闪屏之后):this.cordova.getActivity().getWindow().getDecorView().requestFocus();
这也是Cordova在CordovaActivity. onResume中所做的。如果您的后退按钮在暂停和恢复应用程序后正常工作,但在此之前不能正常工作,则这应该可以解决您的问题。

vhipe2zx

vhipe2zx3#

我在我的应用程序中使用了以下代码:

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

注意,要在device is ready

dsekswqp

dsekswqp4#

对于那些使用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文档说:
你的setup函数也可以选择返回一个 *cleanup函数 *。
如果我们使用cleanup函数来删除监听器,我们可以避免不必要的重复。

相关问题