How to disable android back button handler in ONSEN-UI Phonegap?

Question

I am developing a phonegap application in ONSEN-UI, in which I want to disable the android back button handler. I've tried Phonegap's backbutton hadler code to disable it. But I am unable to do it. Is there any other way to do it?

My Code:

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

 function onDeviceReady() {

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

score 3 · Answer 1 · answered Jan 20 '16 at 16:37

3

This works for me in onsen2...I have it in my app.js

ons.ready(function () {
    ons.disableDeviceBackButtonHandler();
    document.addEventListener('backbutton', function () {}, false);
});

answered Jan 20 '16 at 16:37

ohjeeez

559
4
6

score 2 · Answer 2 · answered May 13 '15 at 11:05

2

This is explained in Onsen UI docs: http://onsen.io/reference/ons.html#methods-summary

Just use the method ons.disableDeviceBackButtonHandler() and it will be disabled. You can use ons.enableDeviceBackButtonHandler() to enable it again.

answered May 13 '15 at 11:05

Fran Dios

3,482
2
15
26

@zen to prevent app from closing, you can override default backbutton handler: `ons.setDefaultDeviceBackButtonListener(function(){/* prompt user to exit, or just do nothing here});` as documented here: https://onsen.io/reference/ons.html#method-setDefaultDeviceBackButtonListener – Buyut Joko Rivai Mar 20 '16 at 08:01

score 0 · Answer 3 · answered May 13 '15 at 12:40

0

Try to leave the function empty. This works perfect for me.

document.addEventListener("backbutton", androidBackKey, false);

var androidBackKey = function(){
 //stay empty
};

answered May 13 '15 at 12:40

TheMassassian

119
6

Doesn't wok for me!Again It exits the app! – Zen Bhatt May 13 '15 at 12:51

score 0 · Answer 4 · answered May 15 '15 at 12:35

Try this:

function onLoad() { document.addEventListener("deviceready",onDeviceReady,false); } function onDeviceReady() { document.addEventListener("backbutton",noth,false); } function noth() { }

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

Use this if you're using a navigator:

myNavigator.getDeviceBackButtonHandler().setListener( stopButton );
function stopButton(e) {
    try{
        myNavigator.popPage();
    }
    catch (err){
        // event.callParentHandler();
        console.log( "Stopping...." + e);
    }
}

It's another listener handled by ONSEN-UI itself that quit the app. So add a listener attached to document will not stop the app from exiting. To understand it's flow, you may check out onsenui_all.js to check out the source code.

score 0 · Answer 6 · answered Feb 22 '18 at 16:42

If someone useing onsenUI with VueJS put this code in app's created or mounted method.

this.$ons.ready(() => {

  this.$ons.disableDeviceBackButtonHandler();

  document.addEventListener("backbutton", e => {
    e.preventDefault();
    e.stopPropagation();
  }, false);

});

score 0 · Answer 7 · answered May 14 '19 at 17:28

If you've been looking for what I'm looking for, that is disable Android back button exiting the app altogether back to launcher, but preserve back button functionality across the app (to back out to main menu or close a dialog for example), you may do it using that method:

ons.setDefaultDeviceBackButtonListener(function(event) {});

This method overrides default action (which would be normally executed if there's nothing other action to execute), which is normally to close the app in case of Cordova.

Source and more examples: https://onsen.io/v2/guide/cordova.html#device-back-button (there's example there that can show confirmation dialog and exit the app if user says yes)

How to disable android back button handler in ONSEN-UI Phonegap?

7 Answers7

Use this if you're using a navigator:

Linked