title: How to handle the back button functionality for Hybrid mobile application using cordova
body: <p>I am creating hybrid mobile application using the cordova and I am new to this. </p>
  
  <p>Here I want to exit the android app if user clicks the back button twice in home page and but i am unable to handle the back button functionality. </p>
  
  <p>Can any one tell me how to handle back button functionality for the particular page</p>
  
  <p>This is my index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;meta name="format-detection" content="telephone=no"&gt;
          &lt;meta name="msapplication-tap-highlight" content="no"&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
          &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="main" data-role="page"&gt;
          &lt;div class="app"&gt;
              &lt;h1&gt;Apache Cordova&lt;/h1&gt;
              &lt;div id="deviceready" class="blink"&gt;
                  &lt;p class="event listening"&gt;Connecting to Device&lt;/p&gt;
                  &lt;p class="event received"&gt;Device is Ready&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my Index.js:</p>
  
  <pre><code>var app = {
      // Application Constructor
      initialize: function() {
          this.bindEvents();
      },
  
      bindEvents: function() {
          document.addEventListener('deviceready', this.onDeviceReady, false);
              document.addEventListener("backbutton", function() {
                  if ( $('.ui-page-active').attr('id') == 'main') {
                      exitAppPopup();
                  } else {
                      history.back();             
                  }
              }, false);
      },
            onDeviceReady: function() {
          app.receivedEvent('deviceready');
      },
      // Update DOM on a Received Event
      receivedEvent: function(id) {
          var parentElement = document.getElementById(id);
          var listeningElement = parentElement.querySelector('.listening');
          var receivedElement = parentElement.querySelector('.received');
  
          listeningElement.setAttribute('style', 'display:none;');
          receivedElement.setAttribute('style', 'display:block;');
  
          console.log('Received Event: ' + id);
      },
          function exitAppPopup() {
          navigator.notification.confirm(
                'Exit PhoneGap ' + device.cordova + ' Demo?'
              , function(button) {
                    if (button == 2) {
                        navigator.app.exitApp();
                    } 
                }
              , 'Exit'
              , 'No,Yes'
          );  
          return false;
      }
  };
  
  app.initialize();
  </code></pre>