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

score 12 · Accepted Answer · edited Feb 13 '15 at 12:09

12

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.

edited Feb 13 '15 at 12:09

ConcurrentHashMap

4,998
7
44
53

answered Sep 25 '13 at 08:26

SHANK

2,978
23
31

Can I change something in `java` or it is completely `impossible`? – Lekhnath Sep 25 '13 at 08:53
I'm not aware of the exact possibility in java, but that's the basic rule of programming, once you have overridden you need to implement the complete functionality in your own function. – SHANK Sep 25 '13 at 09:10
If I need to do It manually, How could i `exit` the app if there is nothing in `history` and go to `back history` if there is one? please help! – Lekhnath Sep 25 '13 at 09:18
Even if you do not implement the back button listener, the back button history needs to be maintained by you only. As there exists only one activity you'll always exit on pressing the back button. You need to maintain the history yourself. Example:On moving to another pages/views, keep adding the paths to a global array and pop elements on pressing the back button – SHANK Sep 25 '13 at 09:37
You can also navigate back using `history.go(-1)` – Ian Jamieson Mar 04 '14 at 15:15

score 1 · Answer 2 · answered Dec 26 '16 at 09:11

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.

Javascript backbutton event listener overrides the android device back button

2 Answers2