jQueryMobile PhoneGap应用程序上偶尔没有响应的后退按钮

Question

我已经使用jQuery Mobile（1.3.1）和PhoneGap（3.4）创建了一个应用程序，并将其设置为一个公平的＃34;平坦的＆＃34;看界面：

我遇到了一些麻烦，只有在iOS上，而且只是偶尔，＆＃34;返回＆＃34;只有一个屏幕上的按钮变得没有响应。同样的HTML＆amp;其他屏幕上的后退按钮的CSS似乎很好，它只是这一个屏幕。这里是chrome，在devtools中选中了按钮以突出显示其命中区域：

只是为了好的衡量标准，这里也是标题：

此屏幕标题的代码几乎与应用中的每个屏幕相同：

<div data-role="header" data-theme="e" data-position="fixed" data-tap-toggle="false">
    <h1>Event Detail</h1>
    <a data-rel="back">Back</a>
</div>

我们发现，如果用户卡在此屏幕上并强行关闭应用程序，该按钮似乎在后续使用中按预期工作。

所以我现在的理论是标题以某种方式妨碍后退按钮（有时）。然而，事实并非每次都让我完全不相信这个理论。

按钮的z-index设置为10，标题的z-index保留默认值（1，正确？）。因此即使是标题阻碍了我的理解，我的理解是10的z-index应该将按钮放在顶部＆＃34;并给它第一次接收点击/点击事件的机会。

该应用程序使用jQueryMobile 1.3.1，因为它的创建时间和方式的时间安排，此时升级不是一个合理的选择。 （1.4.x中有大量的重大变化）

我已经在iOS和Android上调试了应用程序，并且没有抛出任何JavaScript错误。我完全不知道该做什么。这个应用程序正在向成千上万的用户推出，很可能很多人可能遇到这个错误。我宁愿不必解释（我的双腿之间的尾巴）强制关闭是解决这个问题的唯一方法......但那是我到目前为止所做的事情。

有没有人对如何解决这个问题有任何建议或想法？

---

更新1：

我已经注意到在Safari over USB上远程调试应用程序时，我可以看到后面按钮上的类更改，点按时，从ui-btn-up-e到ui-btn-hover-e简要到{{ 1}}并返回ui-btn-down-e - 然而应用程序不会再回来了！ ：（

根据要求，这里是应用于标题，H1和后退按钮的CSS :(只是＆＃34;计算＆＃34;最终值，而不是所有中间重写值）

标题div：

ui-btn-up-e

H1：

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-style: solid;
border-top-width: 1px;
color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 45px;
left: 0px;
padding-top: 1px;
position: fixed;
right: 0px;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
top: -1px;
width: 320px;
z-index: 1000;
zoom: 1;

后退按钮：

color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
height: 23px;
margin-bottom: 10px;
margin-left: 48px;
margin-right: 48px;
margin-top: 12px;
min-height: 19.799999237060547px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-overflow: ellipsis;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
white-space: nowrap;
width: 224px;
zoom: 1;

Answer 1

首先让我告诉你，你的问题可能与按钮/标题CSS没有任何关系。如果此错误偶尔显示且仅在后退功能期间出现问题，则可能是由于 data-rel =“back”功能造成的。

与传统的href页面移动不同， data-rel =“back”使用javascript导航历史记录，根据您的应用内容，该历史记录可能会也可能不起作用。因为jQuery Mobile使用AJAX进行页面处理（从你的按钮我可以看到你正在使用这种方法），它也有自己的处理导航历史的方法。

现在，假设您的应用程序大量使用动态内容生成（包括内容删除），例如，先前的页面已从DOM中删除，在这种情况下， data-rel =“back”将不会工作。如果前一页不存在，您将无法返回。还有其他几个因素也会影响此功能。

您可以采取哪些措施来解决此问题：

1. 为此按钮指定一个类名甚至一个id。之后将点击事件绑定到它（vclick甚至更好，因为它与点击一样快，没有300毫秒延迟，并且可以在桌面和移动浏览器上工作）并且每次单击此按钮时添加控制台输出。所以你会这样做：

   $(document).on('vclick', '#button-ID-goes-here', function(){ 
       console.log('Problematic button');
   });
   

   通过这种方式，您可以测试是否已单击按钮。

2. 接下来的事情有点复杂。您从未发布过您的页面HTML，但查看您的页面图像我认为您使用的是正确的jQuery Mobile范例，基本上您使用 data-role =“page” div容器作为页面容器。如果他们想要一个合适的jQuery Mobile应用程序，你会惊讶于有多少jQuery Mobile开发人员不知道/不了解他们需要/必须拥有它。

   查看标题中包含此按钮的页面。将 pagebeforeshow 事件绑定到该页面，监视器将触发，如果触发，您可以使用它来显示上一页和下一页。

   工作示例：http://jsfiddle.net/Gajotres/vds2U/72/

   $(document).on('pagebeforeshow', '.ui-page',function (e, data) {
       alert("Previous page : " + data.prevPage.attr('id') + " - Next page: " + $.mobile.activePage.attr('id'));
   }); 
   

   使用此解决方案检查下一页是否正确以及是否存在。如果单击“返回”按钮时未触发此页面事件，则表示发生了一些不良事件。

3. 使用下一个代码作为解决方法。基本上使用页面事件并记住您的上一页。因为您当前正在使用后退按钮，所以此处的解决方案是可行的。我们将使用pagebeforeshow事件来查找我们的上一页，我们将它存储到一些JavaScript对象中（它将在页面转换之间保持不变）。

   工作示例：http://jsfiddle.net/Gajotres/vds2U/73/

   $(document).on('pagebeforeshow', '#second',function (e, data) {
       pageHandler.prevPage = data.prevPage.attr('id');
   
       $(document).on('click', '#custom-back-button',function () {
           $.mobile.changePage( "#"+pageHandler.prevPage);
       });    
   }); 
   
   var pageHandler = {
       prevPage : null
   }
   

   这是 data-rel =“back”页面处理的完整自定义解决方案。