Over-ride the back button of android device through phonegap in javascript

Question

I am making an app in HTML5 and javascript and deploying on android device. After confirmation in the application, I don't want it to go back on previous page. But, on the back button of the device it goes on previous page.

I tried many demos. Following is one of the link I tried. http://docs.phonegap.com/en/2.8.0/cordova_events_events.md.html#backbutton

I tried displaying alert for demo purpose. But it does not work.

Please help with your suggestions. Thanks.

I tried the following. It doesn't work. Do I need to add any external jquery file?

<script type="text/javascript" charset="utf-8">
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
        alert("On Load");
    }

     function onDeviceReady() {
        document.addEventListener("backbutton", onBackKeyDown, false);
        alert("Device Ready");
    }

    //document.addEventListener('backbutton', onBackKeyDown, false);

    function onBackKeyDown(event) {
        event.preventDefault();
        alert("back pressed");
    }
    </script>

Did you put event.preventDefault() in the method that is called when back button is pressed? — TheCodeDestroyer, Mar 24 '14 at 12:35
No I did not. I am trying now. If it does not work still, I will post the code of demo I tried. — Deepika, Mar 24 '14 at 12:41
Please find the edits in my question. It shows "on load" alert box, but not the other two alerts. — Deepika, Mar 24 '14 at 12:52

score 1 · Accepted Answer · answered Mar 24 '14 at 12:43

1

The proper way to prevent the default behavior of back button is to add the prevent default method:

document.addEventListener('backbutton', onBackKeyDown, false);

function onBackKeyDown(event) {
    // Handle the back button
    event.preventDefault();
    alert('I am a demo purpose alert thingy');
}

answered Mar 24 '14 at 12:43

TheCodeDestroyer

763
9
29

Are all the cordova/phonegap scripts included? – TheCodeDestroyer Mar 24 '14 at 12:57
What if you try to put deviceready event registration outside of onLoad method? – TheCodeDestroyer Mar 24 '14 at 12:59
I did it and also included cordova-2.2.0.js.But no effect. – Deepika Mar 24 '14 at 13:07
Which device did you try it on? – TheCodeDestroyer Mar 24 '14 at 14:05
Other alerts trigger properly? What if you try on an emulator? – TheCodeDestroyer Mar 24 '14 at 18:45
It shows only the "On Load"alert. I tried on emulator also. It doesn't work. – Deepika Mar 25 '14 at 04:44
1

So basically something is wrong with the registration of your deviceready event, as the code I provided MUST work. Did you try to put it outside of the onLoad function? Also maybe try to update cordova, maybe the 2.2 has a weird bug or something... – TheCodeDestroyer Mar 25 '14 at 06:59
I tried in all ways. Currently, I followed he following link http://stackoverflow.com/questions/9631933/override-android-backbutton-behavior-only-works-on-the-first-page-with-phonegap I included cordova-1.5.0.js and downloaded a demo from https://gist.github.com/dhavaln/2020325 ,but even it did not work. I am stuck on the problem. Please can I get a working demo on it? – Deepika Mar 25 '14 at 08:55
OK when I get home I will try to put something together. – TheCodeDestroyer Mar 25 '14 at 09:33
It worked. You were right, instead of the cordova2.2 I used cordova.js and it worked. Thank You very much for your guidance. :) – Deepika Mar 25 '14 at 12:33
You are welcome, so I my answer helped you I would politely ask to you mark it as an accepted answer. – TheCodeDestroyer Mar 25 '14 at 12:56

score 0 · Answer 2 · answered Mar 24 '14 at 15:23

0

Have a look at the third parameter you pass. It indicates whether the listener uses capture or bubble. You find more information here.

You want to capture the backbutton event at the beginning (capture) and not at the end (bubble).

So try this

document.addEventListener("backbutton", onBackKeyDown, true);

instead of

document.addEventListener('backbutton', onBackKeyDown, false);

answered Mar 24 '14 at 15:23

COBRA.cH

149
1
11

I tried your suggestion, unfortunately it didn't work. – Deepika Mar 24 '14 at 15:52
what android version is your phone running? Edit: Also try putting alerts/console before the registration of the event and in the event method, to see if that code is passed. – COBRA.cH Mar 24 '14 at 16:13
Ok sry missed that you already have alerts. What I also highly recommend is remote debugging with chrome (needs android 4.0 or higher) see here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging – COBRA.cH Mar 24 '14 at 16:44

score 0 · Answer 3 · answered Feb 04 '15 at 03:25

This is an example I use of the device back button with if else

//device back button functions
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener("backbutton", onBackKeyDown, false);
}

function onBackKeyDown() {
    if($state.current.name == 'home'){
        // e.preventDefault();
        navigator.app.exitApp();
    } else {
       $state.go('home');
      e.preventDefault();

    }
}

What if he wanted to go back a state and not 'home' always? – Zac Jul 02 '17 at 04:34 — Zac, Jul 02 '17 at 04:34

Over-ride the back button of android device through phonegap in javascript

3 Answers3