BenM BenM - 1 year ago 438
Android Question

Cordova backbutton event not working

I am currently using Apache Cordova version 5.1.1 to build native apps for iOS and Android. Everything seems to be working fine, except the

event inside of Android.

I would like to use the back button to navigate through the app's screens (the app is built using Framework7), but for some reason the
event never triggers. Here's a review of the (simplified) code that I am using:

if( window.cordova )
document.addEventListener("deviceready", function() { MRC.init(); }, false);

var MRC =
init: function()
if( window.cordova )

// Prevent the back button:
document.addEventListener("backbutton", function(e) {


return false;

}, false);

Everything inside of the
function works, but the
event listener never triggers, and when a user presses their hardware back button on an Android device, the app closes, rather than going to the previous view.

According to Cordova's documentation:

This is an event that fires when the user presses the back button.

document.addEventListener("backbutton", yourCallbackFunction, false);


If you need to override the default back button behaviour you can
register an event listener for the 'backbutton' event. It is no longer
necessary to call any other method to over ride the back button
behaviour. Now, you only need to register an event listener for

Typically, you will want to attach an event listener with
document.addEventListener once you receive the Cordova 'deviceready'

Supported Platforms

  • Android

  • BlackBerry WebWorks (OS 5.0 and higher)

  • Windows Phone 7 and 8

Has anyone encountered a similar problem here, or is there a workaround that I have missed?

Answer Source

Now, I do not know how well this works on Windows Phone and Webworks, but another easy way to catch the back button is to properly use the HTML5 history.pushState API. Simply speaking this means that if you load up your app in the browser that the URL is changing with each navigation through the app and if properly implemented this even means that things like 'resume from memory' will work perfectly (something that's often not the case for phonegap apps) and thus is better than binding the backbutton event. It seems that framework7 supports this using the pushState: true option on the Framework7() init. To be honest I am somewhat worried by the fact that in the description they say

If you develop web app (not PhoneGap or Home Screen web app) it is useful to enable

Which goes directly against my own experience and makes me worry that the Framework7 implementation has some rough edges, but maybe this is just a problem on IE or something? (The only proper implementation of a history supported PhoneGap app I build was for Android and ran on top of Chrome (as is the default for the newest PhoneGap apps I think))

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download