3

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>
  • 2
    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
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');
}
| improve this answer | |
  • 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
  • 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 6:59
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);
| improve this answer | |
  • 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: developers.google.com/chrome-developer-tools/docs/… – COBRA.cH Mar 24 '14 at 16:44
0

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();

    }
}
| improve this answer | |
  • What if he wanted to go back a state and not 'home' always? – Zac Jul 2 '17 at 4:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.