Javascript backbutton event listener overrides the android device back button

Question

I have created Android app using cordova 2.6.0. I have implemented a menu feature in my app using html markups and jQuery which toggles on interacting with device's menubutton. But I could not figure out to achieve the following requirement, to behave like a native app.

Requirement

The menu should hide on pressing device's backbutton if the menu is visible. If the menu is not visible the backbutton should now act normally, which is, either it should exit the app or go to the back history.

This is my code

document.addEventListener('deviceready', function(){

document.addEventListener('menubutton', function(){
//Toggle Menu
//Which is working fine
});

document.addEventListener('backbutton', function(){
if(menu is visible) {
  //Hide the menu
  //This is also working fine
return false;
} 

//BUT the default action of backbutton has gone. It cannot exit the app , neither it brings to back history.

//return true;
//I have also tried to return boolean true , but facing the same problem.
});

}, false);

The actual problem

If I attached an eventlistener for backbutton the device's Back Button is disabled, It does not works as normal.

My question is

Is document.addEventListener('backbutton', function(){}); over riding the device's back button? How to get rid of it?

This is happening on Android 4.1.2 Device

Answer 1

Once you have overridden the back button using the listener, it doesn't perform the native functionalities. You have to implement the exit behaviour as well.

In your overriding method, use the following

document.addEventListener('backbutton', function(){
  if(menu is visible) {
       //Hide the menu
       //This is also working fine
   return false;
  }
  else //nothing is visible, exit the app
  {
    navigator.app.exitApp();
  }
});

Hope that helps.

Answer 2

To answer your question:

Is document.addEventListener('backbutton', function(){}); over riding the device's back button? How to get rid of it?

You can as well remove the event listener on page redirect to continue using the native functionality of back button in subsequent pages. Code to remove event listener as follows:

document.removeEventListener("backbutton", onBackButton, false); where onBackButton is the function associated with the back button event.