Jquery mobile jQuery Mobile 1.4.0中的Control移动设备后退按钮

在我的jQuery移动应用程序中，我需要控制移动设备后退按钮，因为我有3个页面，每个页面都在一个单独的Html文件主页->第1页包含要提交的表单->第2页

如果用户单击第2页的设备返回按钮，我想让应用程序直接返回主页，而不经过表单页面。我在第2页尝试了下面的代码，但是会发生什么呢？手机会返回主页，然后再返回显示第2页，最后再次显示表单页面第1页！我在网上搜索过了，但没有找到任何有用的解决办法。。我怎样才能解决这个问题？？请帮帮我

主页

 <div data-role="page" id="home">
        <div data-role="header" data-position="fixed">
             <h1>Header - Home</h1>

        </div>
        <div data-role="content"></div>
        <a href="p1.html" data-transition="none">Page1</a>
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

---

如果您有任何帮助，我们将不胜感激…请检查此@OmarThanks我已经尝试过了，它可以工作，但它会导致另一个问题：我在第2页有一个带有Ok cancel按钮的弹出窗口，当我按下cancel按钮时，它会关闭弹出窗口，然后返回主页。如何解决此问题？将data history=false添加到popup div.@OmarThanks这可以解决此问题，但不幸的是，在返回主页后，当我单击指向第1页的链接时，另一个问题出现了。从第一次单击开始，它就无法工作。我需要单击3-4次以显示第1页。请如何解决此问题？？

   <!-- Page 1 -->
     <div data-role="page" id="p1">
         <div data-role="header" data-position="fixed">
             <h1>Header - Page 1</h1>

        </div>
        <div data-role="content"></div>
         <form>
         // form elements 
         <div   class="ui-btn ui-input-btn ui-icon-check " >                                                   
            <input type="button" id="submit" data-inline="true" value=" submit"    data-iconpos="left" />

          </div> 
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

 <div data-role="page" id="p2">
         <div data-role="header" data-position="fixed">
             <h1>Header - Page 2</h1>

        </div>
        <div data-role="content"></div>
        <div data-role="footer" data-position="fixed">
             <h1>Footer</h1>

        </div>
    </div>

 $('#submit').on('click',function(){

      $.mobile.changePage('p2.html',{transition:'none'});
  });


  document.addEventListener('backbutton', function(e){
      if($.mobile.activePage.is('#p2')){

       e.preventDefault();
       $(':mobile-pagecontainer').pagecontainer('change', 'home.html', {transition:   'none', reverse: true});
    }
   else {
       navigator.app.backHistory()
   }
   }, false);