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

admin管理员组

文章数量:1429841

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. .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>

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./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>

• javascript
• android
• html
• cordova

Share Improve this question Follow edited Mar 24, 2014 at 12:51 Deepika asked Mar 24, 2014 at 12:29 DeepikaDeepika 33122 gold badges77 silver badges2020 bronze badges 3

• 2 Did you put event.preventDefault() in the method that is called when back button is pressed? – TheCodeDestroyer Commented Mar 24, 2014 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 Commented Mar 24, 2014 at 12:41
• Please find the edits in my question. It shows "on load" alert box, but not the other two alerts. – Deepika Commented Mar 24, 2014 at 12:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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');
}

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

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

    }
}

本文标签： Override the back button of android device through phonegap in javascriptStack Overflow