我使用 jQuery Mobile (1.3.1) 和 PhoneGap (3.4) 创建了一个应用程序，并将其蒙皮以具有相当“扁平”的界面:

我遇到了一些麻烦，只有在 iOS 上，而且只是偶尔，只有一个特定屏幕上的“后退”按钮变得无响应。其他屏幕上后退按钮的相同 HTML 和 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，header 的 z-index 保留为默认值(1，对吗？)。因此，即使是标题挡住了路，我的理解是 10 的 z-index 应该将按钮放在“顶部”并让它首先有机会接收点击/点击事件。

该应用程序使用 jQueryMobile 1.3.1 是因为它的创建时间和创建方式，目前升级不是一个合理的选择。 (1.4.x 中有大量重大更改)

我已经在 iOS 和 Android 上调试了该应用程序，没有抛出任何 JavaScript 错误。我完全不知道该怎么做。这个应用程序正在向成千上万的用户推出，很可能很多人，可能是大多数人，都会遇到这个错误。我宁愿不必解释(夹着尾部)强制关闭是解决此问题的唯一方法……但这就是我到目前为止一直在做的事情。

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

更新 1:

我注意到在通过 USB 在 Safari 中远程调试应用程序时，我可以看到后退按钮上的类在点击时从 ui-btn-up-e 更改为 ui-btn-hover-e 短暂地转到 ui-btn-down-e 并返回 ui-btn-up-e - 然而应用程序不会返回! :(

按照要求，这里是应用于标题、H1 和后退按钮的 CSS:(只是“计算的”最终值，而不是所有中间覆盖值)

标题部分:

-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;

H1:

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;

后退按钮:

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
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-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 0px;
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-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 0px;
box-shadow: none;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 31px;
left: 5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 0, 0) 0px 1px 0px;
top: 15px;
vertical-align: middle;
width: 60px;
z-index: 10;
zoom: 1;

最佳答案

首先让我告诉您，您的问题可能与按钮/标题 CSS 无关。如果此错误偶尔出现并且仅在返回功能期间出现，则您的问题可能是由于 data-rel="back" 功能引起的。

与经典的 href 页面移动不同，data-rel="back" 使用 javascript 导航历史记录，它可能有效也可能无效，具体取决于您的应用内容。因为 jQuery Mobile 使用 AJAX 进行页面处理(从你的按钮我可以看到你正在使用这种方法)它也有自己的方式来处理导航历史记录。

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

你可以做什么来解决这个问题:

1. 给这个按钮一个类名甚至一个 id。之后将点击事件绑定(bind)到它(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 事件绑定(bind)到该页面并监控它是否会触发，如果它触发，您可以使用它来显示上一页和下一页。

   工作示例: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" 页面处理的完整自定义解决方案。

关于javascript - jQueryMobile PhoneGap 应用程序上的后退按钮有时无响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23955697/